html - flexbox 中的 Overflow:auto 对于 display:block 和 display:flex 的 child 表现不同

Question

如果有 display:flex，则 flexbox 中的子项在 overflow 时表现不佳。

我在 codepen 中提供的示例应该是不言自明的: http://codepen.io/sanjay1909/pen/vGrJpG

我不确定我是否正确理解了 flexbox 的 flex 值。

<div class="hbox">
 <div class="vbox resizingDiv">
  <div class="flexbox-item" style="flex-direction:column;overflow:auto">
   <div class="flexbox-inner">1</div>
   <div class="flexbox-inner">2</div>
   <div class="flexbox-inner">3</div>
   <div class="flexbox-inner">4</div>
   <div class="flexbox-inner">5</div>
   <div class="flexbox-inner">6</div>
   <div class="flexbox-inner">7</div>
   <div class="flexbox-inner">8</div>
   <div class="flexbox-inner">9</div>
  </div>
 <div class="flexbox-item ">flex-1</div>
 <div class="flexbox-item ">flex-1</div>
 <div class="flexbox-item ">flex-1</div>
</div>
<div class="vbox resizingDiv">
 <div class="flexbox-item" style="flex-direction:column;overflow:auto">
   <div class="block-inner">1</div>
  <div class="block-inner">2</div>
  <div class="block-inner">3</div>
  <div class="block-inner">4</div>
  <div class="block-inner">5</div>
  <div class="block-inner">6</div>
  <div class="block-inner">7</div>
  <div class="block-inner">8</div>
  <div class="block-inner">9</div>
 </div>
<div class="flexbox-item ">flex-1</div>
<div class="flexbox-item ">flex-1</div>
<div class="flexbox-item ">flex-1</div>

.hbox {
  display: flex;
  flex-direction:row;
  background-color: #034;
  padding: 4px;
}
.vbox {
  display: flex;
 flex-direction:column;
 background-color: #0aa;
 margin-top: 5px;
 padding: 4px;
}
.resizingDiv {
  width: 100px;
  height: 400px;
 }

.flexbox-item {
  display:flex;
  background-color: #ccc;
  flex: 1;
  margin-bottom: 2px;
  overflow:auto
 }

.flexbox-inner{
  display:flex;
  background-color: #aac;
  margin-bottom:2px;
}

.block-inner{
  background-color: #aac;
  margin-bottom:2px;
}

Answer 1

需要考虑的几件事:

• 两组元素 - .flexbox-inner 和 .block-inner - 都是 flex 元素。因为它们是 flex 容器的子容器，所以给它们 display:flex、display:block、display:table 都没关系， 任何。它们是 flex 元素，将接受 flex 属性。

• 您遇到的问题与overflow 属性无关。如果您在代码中删除 overflow:auto，堆叠差异仍然存在。

• 您看到的问题仅存在于 Chrome 中。如果你在 Firefox 或 IE11 中运行你的代码笔，你会看到两组 flex 元素堆叠相同。 (它们在其他浏览器中的呈现方式可能不同，但两个溢出列在 FF 和 IE11 中是相同的。)

• 在 Chrome 中，如果您从 flex 元素中删除 display:flex，两列将匹配。

那么，为什么向 Chrome 中的 flex 元素添加 display:flex 会导致它们折叠？

对此没有明确的答案，我在 flexbox spec 中没有找到任何内容。 .考虑到它只发生在 Chrome 中，它可能只是一个浏览器错误。