子div未随父容器缩放的问题及自动缩放实现方法咨询

我有一个包含5个子div的父div，原本父div未占满窗口宽度时，子div能均分空间填满父容器。但给父div设置width: 90vw;后，父容器缩放了，子div尺寸却没跟着变，这是为什么？该怎么实现子div随父容器自动缩放？

原代码 #

HTML代码

<div class="parent">
  <div class="child" style="background-color:red" >child 01</div>
  <div class="child" style="background-color:blue">child 02</div>
  <div class="child" style="background-color:yellow">child 03</div>
  <div class="child" style="background-color:grey">child 04</div>
  <div class="child" style="background-color:green">child05</div>
</div>

CSS代码

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.parent {
  display: flex;
  width: 90vw;
}

原因分析 #

你只给父容器设置了display: flex，但flex子元素的默认flex-grow属性值为0——这意味着子元素不会主动占用父容器的剩余空间。当父容器宽度变化时，子元素只会保持自身由内容撑开的固有宽度，不会自动填充父容器的可用空间。

解决方案 #

有两种常用方式可以实现子div随父容器自动缩放并均分空间：

方法一：给子元素设置flex: 1

flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%;的简写，它会让所有子元素均分父容器的可用空间，同时支持根据父容器大小自动伸缩。

修改后的CSS只需添加：

.child {
  flex: 1;
}

方法二：单独设置flex-grow: 1

如果你只需要子元素扩张填充剩余空间，不需要收缩，可以单独设置flex-grow: 1。此时子元素的初始宽度为内容宽度，最终宽度是内容宽度加上均分的剩余空间。

对应的CSS代码：

.child {
  flex-grow: 1;
}

完整修改后的CSS示例 #

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Muli', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.parent {
  display: flex;
  width: 90vw;
}

.child {
  flex: 1;
  padding: 1rem;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者Coding Newbie