如果先前的兄弟浮动,则Flex容器溢出

Question

如果将前一个兄弟设置为float宽度为100%并且将以下兄弟设置为display: flex,则后者将溢出父容器而不是换行到新行.

对于任何其他display值,但flex(或grid)它包装,因为它应该,所以它设置为什么时不会flex

.float-left {
  float: left;
  width: 100%;
}

.display-flex {
  display: flex;
  background: yellow;
}


/* Demo css */

.container {
  max-width: 80%;
  margin: auto;
  background: white;
}

<div class="container">
  <div class="float-left">I'm floating left, with a width of 100%.</div>
  <div class="display-flex">'Floating left' takes up 100% of the space, but still i don't go onto a new line?</div>
</div>

Answer 1

问题是该元素.display-flex不是弹性项目。它是标准块容器中的子元素。

因此，flex仅适用于 Flex 项目的简写属性及其普通组件属性没有任何效果。

但是，该width属性适用于弹性项目和容器。

更多详细信息请参见：Flex-basis 和 width 之间有什么区别？