Flexbox的包装在一个嵌套集装箱

Question

我有它本身包含一个整版Flexbox的塔型容器：

• 有3个固定大小的盒子
• “绿色”“红”栏目Flexbox的容器有5个固定尺寸的盒子的排flexbox容器

我希望这两个嵌套容器在窗口大小缩小时包装它们的内容。

对于绿色行容器，当窗口水平缩小时，它可以很好地工作，但是我无法使它适用于红色容器（垂直缩小尺寸时）。

这里是小提琴：http://jsfiddle.net/7ko3yfk2/

HTML：

<div style="position:absolute; 
      top:0px; left:0px; bottom:0px; right:0px; 
      overflow:hidden; 

      display:flex; 
      justify-content:flex-start; 
      align-items:stretch; 
      flex-direction:column; 
      flex-wrap: nowrap;"> 

<div style='flex:auto; 
       background-color:rgba(255,0,0,0.2); 
       display:flex; 
       justify-content:space-between; 
       align-items:stretch; 
       flex-direction:column; 
       flex-wrap: wrap;'> 
    <div id='redBox' style="flex:none">Box 1</div> 
    <div id='redBox' style="flex:none">Box 2</div> 
    <div id='redBox' style="flex:none">Box 3</div> 
</div> 

<div style='flex:none; 
       background-color:rgba(0,255,0,0.2); 
       display:flex; 
       justify-content:space-between; 
       align-items:stretch; 
       flex-direction:row; 
       flex-wrap: wrap;'> 
    <div id='greenBox' style="flex:none">Box 5</div> 
    <div id='greenBox' style="flex:none">Box 6</div> 
    <div id='greenBox' style="flex:none">Box 7</div> 
    <div id='greenBox' style="flex:none">Box 8</div> 
    <div id='greenBox' style="flex:none">Box 9</div> 
</div> 

CSS

#redBox { 
    background-color: rgba(255, 0, 0, 0.2); 
    width:100px; 
    height:100px; 
} 
#greenBox { 
    background-color: rgba(0, 255, 0, 0.2); 
    width:100px; 
    height:100px; 
} 

Answer 1

这是一个棘手的一个。显然，要使flex: auto与flex-wrap一起使用，您需要在元素上有height或min-height。

我不知道这是否是根据规范，但似乎这样的工作方式：

min-height: 100px确保红色容器永远不会比小箱子。外部容器上的height和max-height提供了增长/收缩背景下的红色集装箱，但没有必要在这个例子：

<div style="position:absolute; 
     top:0px; left:0px; bottom:0px; right:0px; 

     display:flex; 
     justify-content:flex-start; 
     align-items:start; 
     flex-direction:column; 
     flex-wrap: nowrap; 
       max-height: 100%; 
       height: 100%;"> 

    <div style='flex: 1 1 auto;background-color:rgba(255,0,0,0.2); 
      display:flex; 
      justify-content:space-between; 
      align-items:stretch; 
      flex-direction:column; 
      flex-wrap: wrap; 
      min-height: 100px;'> <!-- this is the magic --> 
     <div id='redBox' style="flex:none">Box 1</div> 
     <div id='redBox' style="flex:none">Box 2</div> 
     <div id='redBox' style="flex:none">Box 3</div> 
    </div> 

    <div style='flex:none;background-color:rgba(0,255,0,0.2); 
      display:flex; 
      justify-content:space-between; 
      align-items:stretch; 
      flex-direction:row; 
      flex-wrap: wrap;'> 
     <div id='greenBox' style="flex:none">Box 5</div> 
     <div id='greenBox' style="flex:none">Box 6</div> 
     <div id='greenBox' style="flex:none">Box 7</div> 
     <div id='greenBox' style="flex:none">Box 8</div> 
     <div id='greenBox' style="flex:none">Box 9</div> 
    </div> 
</div> 

http://jsfiddle.net/7ko3yfk2/1/