Overflow:auto 在 flexbox 中对于 children 与 display:block 和 display:flex 的行为不同

Question

Children 在 flexbox 中如果它有 display:flex，它们在 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 容器的子容器，所以给它们 display:flex、display:block、display:table 都没关系。它们是弹性项目，将接受弹性属性。
您遇到的问题与overflow属性无关。如果您删除代码中的 overflow:auto，堆叠差异仍然存在。
您看到的问题仅存在于 Chrome 中。如果你在 Firefox 或 IE11 中运行你的代码笔，你会看到两组弹性项目堆叠相同。（它们在其他浏览器中的呈现方式可能不同，但两个溢出列在 FF 和 IE11 中是相同的。）

在 Chrome 中，如果您从 flex 项目中删除 display:flex，两列将匹配。

那么，为什么向 Chrome 中的弹性项目添加 display:flex 会导致它们折叠？

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

Overflow:auto 在 flexbox 中对于 children 与 display:block 和 display:flex 的行为不同

Overflow:auto inside a flexbox behaves differently for children with display:block and display:flex

html

css

overflow

flexbox