渲染错误还是我的错误？：溢出隐藏零高度从 Flexbox 中伸出

Question

我想知道我是不是做错了什么或者这是否属于 flex 错误...（当前 chrome 65.03 在 Ubuntu 下）

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

→ Source (codepen)

嗯：虚线main是一个flexbox。

.collapsible 是一个高度为零且顶部和底部有一条彩色线的元素（因此：这里显然没有 margin-collapse-issues），显式 height: 0 和 overflow: hidden.开发工具检查确认高度为零。

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

我觉得很奇怪。让我想起了经典的 margin-collapse-pains（或清除浮点数非常错误）。通过将 main 设置为 display: block 可以轻松解决此问题，但我仍然想知道为什么...

Answer 1

这与基线对齐有关。您在 main-选择器上设置 align-items: baseline。它似乎适用于 align-items 属性.

的其他值

我没有时间阅读更多关于 flexbox baselines 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...

渲染错误还是我的错误？：溢出隐藏零高度从 Flexbox 中伸出

render bug or my mistake?: overflow-hidden-zero-height sticking out of Flexbox

css

html-rendering

flexbox

我想知道我是不是做错了什么或者这是否属于 flex 错误...（当前 chrome 65.03 在 Ubuntu 下）

→ Source (codepen)