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有两部分，上部（红色背景）和下部。在我的结构中，上部和下部被设置为容器中的弹性框，其显示为具有列方向的flex。上也显示带行方向的flex。但是，在此设置中，当新项目添加到上部时，上部的高度会增加。我不希望它与增加的孩子一起扩大。

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

编辑2：

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

Answer 1

如果我理解你的话，这有三种方法可以实现这个目标

通过向flex: 0提供box1，您告诉它只有内容大小，并且当内容高于{时添加max-height: 80px您说“开始滚动” {1}}

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（box1具有flex 1，box2具有flex 12,100 / 12 + 1 = 7.69），当内容增长超过该值时，它将开始滚动。

请注意，8%需要container，因此height:100%可以获取其值。

flex-basis: 8%

.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> div与inner一起使用（因为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;
}

当行添加到弹性框时，框的高度会增加

1 个答案: