html - 当容器比屏幕宽时填充正确？

我有以下 html 树:

div with padding: 2rem 1.25rem;
- 带有 max-width: none 的 div，以便它溢出超过屏幕的宽度

内边距在顶部、底部和左侧正确应用，但在右侧应用不正确。

我知道问题出在哪里，但我不确定如何解决。父 div 的宽度为 375px，这是屏幕的宽度，而子 div 的宽度为 890px。如何让 parent 像 child 一样展开？

上面的父 div 还有一些其他祖先。我需要让它们全部展开吗？

<!DOCTYPE html>

<html>

<head>
  <style>
    .parent {
      display: flex;
      flex-flow: row nowrap;
      padding: 2rem 1.25rem;
    }
    
    .child {
      background-color: #f5f8ff;
      border: 1px solid #eff5f5;
      display: flex;
      flex-flow: row nowrap;
      min-width: 100vw;
    }
    
    .item {
      align-items: center;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
      height: 44px;
      width: 256px;
    }
  </style>
</head>

<body>
 <div class="parent">
   <div class="child">
     <div class="item">Foo</div>
     <div class="item">Bar</div>
     <div class="item">Baz</div>
     <div class="item">Qux</div>
   </div>
 </div>
</body>
</html>

最佳答案

你的问题非常模糊，但如果你希望你的父 div 基本上总是足够大以容纳你的子 div。您可以尝试将父 div 设置为显示:内联。