Flexbox项目的高度不受其内容影响

Question

我知道这听起来像是又一个关于flexbox的问题，但我在谷歌或stackoverflow的现有帖子中找不到解决方案。

问题很简单。

我有一个父div内部有3个子div，其中一个包含比其最终尺寸大的内容。我想让每个子元素都是其父元素的1/3，而不管其内容如何。

这是jsfiddle链接: http://jsfiddle.net/xeqo0msq/

这是HTML:

<div class="parent">
   <div class="child red">
       <div class="content">1</div>
   </div>
   <div class="child blue">2</div>
   <div class="child green">3</div>
</div>

并且相关的CSS：

.parent {
   display: flex;
   flex-direction: column; /*or row*/
   height: 100%;
   width: 100%;
}

.child {
   flex: 1;
}

.content{
   width: 800px;
   height: 100px;
}

.red {background: red;}
.blue {background: blue;}
.green {background: green;}

对于flex-direction: row;，它的效果如预期：每个子元素都是其父元素的1/3，尽管第一个内容要大得多。宽度的表现就像与内容无关一样。

对于flex-direction: column;，第一个子元素比其他两个子元素要大得多。

使用flexbox和flex-direction: column;能否实现这一点？

- JBE

Answer 1

当使用flex-direction: row时，父元素的宽度受屏幕限制，因此是已知的。Flex将宽度分配给三个子元素。

但是当使用flex-direction: column时，父元素的高度未知（由子元素确定）。虽然您将其定义为height: 100％，但这个100％是相对于其父元素body的高度。 body的高度不是全屏高度。

有三个选项：

1. 只需向.child添加height值即可控制其高度：JSFiddle

2. 限制.parent的高度，如JSFiddle所示。

3. 如果您想要每个子元素占据屏幕高度的1/3，则需要将html，body的高度定义为100％，如此演示：JSFiddle

- Joy

---

给我点踩的那位，能否指出原因？也许我漏掉了什么？ - Joy