Html 溢出：flexbox中的“自动”对于具有display:block和display:flex的子对象的行为不同

flexbox中的子项如果具有

显示：flex

，则它们在

溢出时表现不好

我在codepen中提供的示例应该是不言自明的：

我不确定我是否正确理解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>

需要考虑的几件事：


两组元素–
.flexbox-inner
和
.block-inner
–都是弹性项。因为它们是flex容器的子容器，所以不管您给它们的是
display:flex
、
display:block
、
display:table
，都没有关系。它们是flex项目，将接受flex属性

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

您看到的问题仅存在于Chrome中。如果您在Firefox或IE11中运行codepen，您将看到两组flex项的堆栈相同。（它们在另一个浏览器中的渲染可能不同，但在FF和IE11中，两个溢出列是相同的。）




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

那么，为什么向Chrome中的flex项添加
display:flex
会导致它们崩溃呢

这个问题没有明确的答案，我在报告中什么也没发现。考虑到这只发生在Chrome中，这可能只是一个浏览器错误。
谢谢，屏幕截图解释非常有用
.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;
}