Question

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

问题很简单。

我在父div中有3个子div，其中一个包含大于其最终大小的内容。我希望每个孩子的父母1/3无法满足其内容。

这是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时，父级的宽度受屏幕限制，因此它是已知的。 Flex将宽度分配给三个孩子。

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

您有三种选择：

只需将height值添加到.child即可使其高度可控：JSFiddle
将.parent高度限制为JSFiddle。
如果您需要的是each child occupies 1/3 of the screen height，则需要将html, body的高度定义为100%，例如此演示：JSFiddle
< / LI>

Flexbox项目高度与其内容无关

1 个答案: