如何让flexbox的autogrow儿童？

Question

我：

<style> 
     .parent{ 
      display: flex; 
      flex-flow: row wrap; 
     } 
     .c1{ 
      flex: 1 100%; 
      background: green; 
     } 
     .c2{ 
      flex: 1; 
      background: red; 
     } 
     .c3{ 
      flex: 4; 
      background: cyan; 
     } 
    </style> 

<div class="parent"> 
    <div class="c1">100% width</div> 
    <div class="c2">This text is big and long, and pushes the other div towards the bottom of the page and blabla.</div> 
    <div class="c3">This should not grow.</div> 
</div> 

我不知道，如果它是更多钞票有青色的div不要有100％。固定大小看起来不正确，因为我希望它随着不同窗口大小的文本流的增长而增长。

Answer 1

只需添加：

align-items: flex-start; 

父DIV。这使得孩子们对齐顶部，并有不同的大小。奇怪的是，align-items的默认值是stretch。