flexbox 的子元素不会占据容器的所有宽度答案

【问题标题】：Children of a flexbox don't take up all the width of the containerflexbox 的子元素不会占据容器的所有宽度
【发布时间】：2018-04-13 11:01:20
【问题描述】：

这是我的代码：

body {
  margin: 0;
}

#parent {
  width: 100vw;
  height: 100vh;
  display: flex;
}

#left {
  background: blue;
  height: 100%;
}

#right {
  background: purple;
  height: 100%;
}

<div id="parent">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

据我了解，如果没有为 flexbox 子级指定宽度，它们应该各自占用相等的空间来填充父级。因此，据此，我认为#left 和#right 的宽度都将占#parent 的50%，但它们似乎只是占用了所需的空间。

为什么他们不是每个父母的50%？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您还需要通过向两个孩子应用 flex-grow: 1 来告诉孩子他们可以扩展以填充可用空间。另请注意，flex 子项会自动占据父项的全部高度，因此您不需要在子项上使用 height: 100%：

body {
  margin: 0;
}

#parent {
  width: 100vw;
  height: 100vh;
  display: flex;
}

#left {
  background: blue;
  flex-grow: 1;
}

#right {
  background: purple;
  flex-grow: 1;
}

<div id="parent">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

【讨论】：