溢出：对于具有display：block和display：flex的子项，flexbox中的auto表现不同

Question

如果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 - 都是弹性项目。由于它们是弹性容器的子级，因此如果您为它们display:flex，display:block，display:table提供它们，则无关紧要。它们是弹性项目，将接受弹性属性。

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

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

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

那么，为什么在Chrome中的flex项目中添加display:flex导致它们崩溃？

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