html - flexbox的子代不会占用容器的所有宽度

这是我的代码：

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%？

最佳答案

您还需要通过对两个子级应用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>

关于html - flexbox的子代不会占用容器的所有宽度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49808573/