Flexbox项目的高度与其内容无关

Question

我知道这听起来又像是关于flexbox的另一个问题，该问题在其他地方已解决，但我找不到来自Google或stackoverflow现有帖子的解决方案。

问题很简单。

我在父div中有3个子div，其中一个包含的内容大于其最终大小。我希望每个孩子都是1/3其父母，无论其内容如何。

这是小提琴：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;？

Answer 1

当定义flex-direction: row为时，parent的宽度受屏幕限制，因此众所周知。Flex将宽度分配给三个孩子。

但是当时flex-direction: column，父母的身高未知（由孩子决定）。尽管您将其定义为height: 100%，但这100%是相对于其父元素的高度body。的高度body不是全屏高度。

有三个选项供您选择：

1. 只需添加一个height值即可.child使其高度可控：JSFiddle

2. 限制.parent高度，例如JSFiddle。

3. 如果你想要的是each child occupies 1/3 of the screen height，你需要定义的高度html, body是100%这样的演示：的jsfiddle