Question

请看一下这个简单的例子： https://jsfiddle.net/2xa8L8wL/16/

HTML

<p>A, B, C are all flex columns.</p>
<p>In Chrome, B's height is limited by its parent A.</p>
<p>In Firefox, B's height is expanded by its child C.</p>
<a>
  A (height: 100px)
  <b>
    B (height: auto)
    <c>
      C (height: 200px)
    </c>
  </b>
</a>

CSS

a, b, c {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

a {
  background-color: red;
  height: 150px;
}

b {
  background-color: orange;
  height: auto;
}

c {
  background-color: yellow;
  height: 200px;
}

有三个弹性列A，B和C.
A是B
B是C的父母。
A有高度：100px;
B有身高：自动;
C高度：200px;

那么B的高度应该是多少？

B的高度应该由其父A的高度约束，或者B的高度是否应该扩展到包含C的高度？

这在不同的浏览器中呈现不同。熟悉Flexbox规范的人能否告诉我哪种行为正确？或者都不是？

带有“height：auto”的嵌套CSS Flexbox列在不同浏览器中的行为有所不同

0 个答案: