Flexbox 高度问题答案

【问题标题】：Flexbox height issuesFlexbox 高度问题
【发布时间】：2014-03-08 23:44:27
【问题描述】：

我正在尝试学习如何使用 flexbox 制作好看的“盒子”。我制作了 3 列 flex 项目，但它们没有填满窗口（即每个主体高度占 33%）。在查看指南 (http://css-tricks.com/snippets/css/a-guide-to-flexbox/) 后，我尝试使用 flex-grow，但这不起作用。有谁知道如何做到这一点？

CSS：

.flexbox {
  display: flex;
  flex-flow: column wrap;
  flex-grow: 1;

  > div {
    padding: 1rem;
    &:nth-child(1) { background: #FF0000;}
    &:nth-child(2) { background: #00FF15;}
    &:nth-child(3) { background: #0015FF;}

}
}

html, body {
  height: 100%;
  font-size: 62,5%;
}

HTML：

<body>
  <section class="flexbox">

    <div>
      <h1> This is the first box </h1> <p>It's a very cool looking box, I agree!</p>       
     </div>

    <div>
      <h2> This is the second box </h2> <p>Not nearly as cool, right?</p>  
    </div> 

    <div> 
      <h3> This is the third box </h3> <p>I'm not even going to mention this one.</p> </div>

  </section>

</body>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

flex (flex-grow, flex-shrink, flex-basis) 属性适用于弹性项目，而不是弹性容器。

http://codepen.io/cimmanon/pen/mHbLi

.flexbox {
  display: flex;
  flex-flow: column wrap;
  height: 100%; /* here */

  > div {
    flex-grow: 1; /* here */
    padding: 1rem;
    &:nth-child(1) { background: #FF0000;}
    &:nth-child(2) { background: #00FF15;}
    &:nth-child(3) { background: #0015FF;}
  }
}

html, body {
  height: 100%;
  font-size: 62.5%;
}

【讨论】：

【解决方案2】：

你可以尝试使用 PX 而不是 %

height: 300px

这可能会有所帮助，因为它似乎涵盖了有问题的高度： http://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：