Question

我有以下html树：

div与padding: 2rem 1.25rem;
- 带有max-width: none的div，以使其溢出超出屏幕宽度

在顶部，底部和左侧正确填充了填充，但是在右侧没有正确填充。

我知道问题出在哪里，但我不确定如何解决。父div的宽度为375px，即屏幕的宽度，而子div的宽度为890px。我怎样才能让父母像孩子一样膨胀？

上面的父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>

Answer 1

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

.parentdiv{
 display: inline;
 }

并且不设置宽度。父div总是足够大以容纳其子div。

希望这会有所帮助。

Answer 2

尝试一下：

<!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: 100%;
    }
    
    .item {
      text-align: center;
      flex: 0 0 25%;
    }
  </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>

当容器比屏幕宽时，填充正确吗？

2 个答案: