html - 当行添加到 flex 盒子时，盒子的高度增加

Question

当我将更多 inbox1 类 div 添加到类 box1 的 div 中时，box1 的高度会增加。您可以在 jsfiddle 中观察到这一点红色背景永远不会消失，但是添加了很多 inbox1。这是什么原因？

.outer {
  position: relative;
  width: 400px;
  height: 600px;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
}

.container {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

d1 {
  flex: 1;
  background-color: yellow;
}

.d2 {
  flex: 1;
  background-color: green;
}

.box1 {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  color: white;
  flex: 1;
  background-color: red;
  overflow: scroll;
}

.box2 {
  color: white;
  flex: 12;
  background-color: blue;
}

.inbox1 {
  flex: 1 100%;
  background-color: purple;
}

<div class="outer">
  <div class="container">
    <div class="box1">
      <div class="inbox1">inbox1</div>
      <div class="inbox1">inbox1</div>
      <div class="inbox1">inbox1</div>
      <div class="inbox1">inbox1</div>
      <div class="inbox1">inbox1</div>
    </div>
    <div class="box2"></div>
  </div>
  <div class="d1"></div>
  <div class="d2"></div>
</div>

编辑:

这个结构的目的是，container div是一个网站的内容，d1和d2 div代表侧边栏。但是，示例中未设置它们的顺序，因为为了结果需要它们。Container div 有两部分，upper(红色背景)和lower。在我的结构中，这个 upper 和 lower 被设置为容器中的 flex boxes，它是 display flex with column direction。 Upper 也是显示行方向的 flex 。然而，在这个设置中，随着新元素被添加到 upper 中，upper 的高度增加。我不希望它随着添加的 child 而扩大。

请注意，如果我删除 d1 和 d2 div 并从 outer div 中删除 display:flex 和相关的 css 属性，并在其中添加容器作为经典的相关元素，并更改NOTHING else，这个问题神奇地消失了。

编辑 2:

感谢 oriol，我确认这只发生在 chrome 上。

Answer 1

如果我没理解错的话，这里有 3 种方法可以做到这一点

通过提供 flex: 0给你的box1 ，你告诉它只和它的内容一样大，并通过添加 max-height: 80px当内容高于 80px 时，你说“开始滚动”

.outer {
  position:relative;
  width:400px;
  height:600px;
  background-color:black;
  display: flex;
  flex-flow: row wrap;
}

.container {
  position:relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d1 {
  flex: 1;
  background-color: yellow;
}

.d2 {
  flex: 1;
  background-color: green;
}

.box1 {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  color: white;
  flex: 0;                     /* changed from 1 to 0  */
  background-color: red;
  overflow: scroll;
  max-height: 80px;            /* added                */
}

.box2 {
  color: white;
  flex: 12;
  background-color: blue;
}

.inbox1 {
  flex: 1 100%;
  background-color: purple;
}

<div class="outer">
  <div class="container">
    <div class="box1">
      <div class="inbox1">
        inbox1
      </div>
      <div class="inbox1">
        inbox1
      </div>
      <div class="inbox1">
        inbox1
      </div>
      <div class="inbox1">
        inbox1
      </div>
      <div class="inbox1">
        inbox1
      </div>
    </div>

    <div class="box2">

    </div>

  </div>
  <div class="d1">
  
  </div>
   <div class="d2">
  
  </div>
</div>

设置flex-basis至 8% (box1 的 flex 1 和 box2 的 flex 12, 100/12+1 = 7.69)当内容超出这个范围时，它开始滚动。

请注意 container需求height:100% , 所以 flex-basis: 8%有从哪里获得它的值(value)。

.outer {
  position:relative;
  width:400px;
  height:600px;
  background-color:black;
  display: flex;
  flex-flow: row wrap;
}

.container {
  position:relative;
  height: 100%;                /* added */               
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d1 {
  flex: 1;
  background-color: yellow;
}

.d2 {
  flex: 1;
  background-color: green;
}

.box1 {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  color: white;
  flex: 1;                
  flex-basis: 8%;              /* added */
  background-color: red;
  overflow: scroll;
}

.box2 {
  color: white;
  flex: 12;
  background-color: blue;
}

.inbox1 {
  flex: 1 100%;
  background-color: purple;
}

<div class="outer">
  <div class="container">
    <div class="box1">
      <div class="inbox1">
        inbox1
      </div>
      <div class="inbox1">
        inbox1
      </div>
      <div class="inbox1">
        inbox1
      </div>
      <div class="inbox1">
        inbox1
      </div>
      <div class="inbox1">
        inbox1
      </div>
    </div>
    <div class="box2">
    </div>
  </div>
  <div class="d1">
  </div>
   <div class="d2">  
  </div>
</div>

使用inner div 与 position: absolute (因为 flex 有一些强制滚动的问题，这个解决了这个问题)

.outer {
  position:relative;
  width:400px;
  height:600px;
  background-color:black;
  display: flex;
  flex-flow: row wrap;
}

.container {
  position:relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.d1 {
  flex: 1;
  background-color: yellow;
}

.d2 {
  flex: 1;
  background-color: green;
}

.box1 {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  flex: 2;                       /* temp. adjusted to make it slightly bigger        */
  position: relative;            /* added to make position: absolute relate to this  */
}
  .box1 .inner {                 /* added rule to make box1 content scroll           */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    color: white;
    background-color: red;
  }

.box2 {
  color: white;
  flex: 12;
  background-color: blue;
}

.inbox1 {
  flex: 1 100%;
  background-color: purple;
}

<div class="outer">
  <div class="container">
    <div class="box1">
      <div class="inner">
        <div class="inbox1">
          inbox1
        </div>
        <div class="inbox1">
          inbox1
        </div>
        <div class="inbox1">
          inbox1
        </div>
        <div class="inbox1">
          inbox1
        </div>
        <div class="inbox1">
          inbox1
        </div>
      </div>
    </div>
    <div class="box2">
    </div>
  </div>
  <div class="d1">
  </div>
   <div class="d2">  
  </div>
</div>