呈现错误还是我的错误？：Flexbox溢出隐藏零高度伸出来

Question

我想知道我是否做错了什么，或者是否可以将其视为flex bug ...（在Ubuntu下为当前Chrome 65.03）

<main>
The outer container...
<section class="collapsible">
    <button className='buttonA'>Click me</button>
</section>
</main>
Some more text...

→ Source (codepen)

好吧：虚线main是Flexbox。

.collapsible是一个元素，高度为零，顶部和底部有一条彩色线（因此：这里显然没有边距崩溃问题），显式的height: 0和overflow: hidden 。开发人员工具检查确认高度为零。

仍然：它的内在性（样式为height:220px的按钮）显然具有外部作用。根本不是周围的.collapsible，而是主要...

对我来说很奇怪。让我想起了经典的保证金崩溃痛苦（或清除浮动错误）。通过将main设置为display: block可以轻松解决此问题，但是我仍然想知道为什么...

Answer 1

它与基线对齐有关。您在align-items: baseline选择器上设置了main。对于align-items属性的其他值，它似乎可以正常工作。

我没有时间阅读有关flexbox基线atm的更多信息，但是我很确定可以在这里找到更详细的解释：https://drafts.csswg.org/css-flexbox-1/#flex-baselines

html {
  font-family: sans;
  font-size: 1.4em cosmetic;
}

main {
  border: 4px dashed rgba(255, 0, 0, 0.4);
  display: flex;
  flex-wrap: wrap;
  align-items: initial;
}

.collapsible {
  border-top: 2px solid blue;
  border-bottom: 2px solid purple;
  height: 0;
  width: 100%;
  overflow: hidden;
}

.collapsible-inner {
  background: rgba(128, 0, 128, 0.6);
}

button {
  height: 220px;
}

Flex elements appears to have a »radiation« affekt going beyond a height-0-element two levels up. Investigating...<br/>&nbsp;<br/>

<main>
The outer container...
<section class="collapsible">
    <button className='buttonA'>Click me</button>  
</section>
</main>
Some more text...