如何让块元素高度自动，而它本身没有子元素

Question

问题：假设我们在div元素中有三个div元素作为下面的代码。我想设置内部div的高度auto。例如，如果外部div的高度为300px并且我们有三个内部元素，则内部元素的高度应为100px。

我所知道的：如果内部元素没有子元素，则内部元素的高度为0px。但是，我们可以改变这种现象吗？

原因：100px = 300px / 3.

解算器：我可以使用js来解决这个问题。但是，我想知道我是否可以使用css来解决这个问题。

#outer {
  width: 300px;
  height: 300px;
  ;
  display: flex;
  flex-direction: column;
}

#inner1 {
  background: #ccc;
}

#inner2 {
  background: red;
}

#inner3 {
  background: blue;
}

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
  <div id="inner3"></div>
</div>

Answer 1

将flex:1应用于内部flex元素。 flex:1是

的简写css

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

参考链接

• flex-grow
• flex-shrink
• flex-basis

Stack Snippet

#outer {
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
}

#outer div {
  flex: 1;
}

#inner1 {
  background: #ccc;
}

#inner2 {
  background: red;
}

#inner3 {
  background: blue;
}

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
  <div id="inner3"></div>
</div>