Flex grow 适用于元素本身，但不适用于容器

Question

我在容器 div 中有三个 div。容器的高度为 500 像素。即使在将 flex grow 属性设置为 1（在容器中）后，divs 也不会增长，但是当在元素本身上设置时（容器中的子 divs），它们成长。有什么我想念的吗？

.container {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  height: 500px;
  background-color: red;
}

div div {
  flex-basis: 0;
  margin: 10px;
  border: white 4px solid;
  background-color: burlywood;
}

<div class="container">
  <div>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia, deserunt necessitatibus! Quod beatae nulla necessitatibus odio recusandae nihil et totam officiis nisi in molestiae numquam, odit, commodi, repudiandae at dolor dolorem dolores fugiat
      accusantium eum. Eaque sit repudiandae cum, autem perferendis repellendus accusantium? Sit consequatur ipsum sed dolores repudiandae minus.</p>
  </div>
  <div></div>
  <div></div>
</div>

Answer 1

这种行为没有任何问题。 flex-grow 属性旨在应用于弹性项目本身。它指定项目相对于同一容器内的其余灵活项目的增长量。

Answer 2

不，这是正确的。 flex-grow 属性专门用于弹性项目，而不是弹性容器本身。将它应用到容器上不会有任何作用。

.flex {
  width: 350px;
  height: 200px;
  display: flex;
}

.box-1 {
  flex-grow: 1;
  background-color: red;
}
.box-2 {
  flex-grow: 3;
  background-color: blue;
}
.box-3 {
  flex-grow: 2;
  background-color: green;
}
.box-4 {
  flex-grow: 1;
  background-color: yellow;
}
.box-5 {
  flex-grow: 1;
  background-color: gray;
}

<div class="flex">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4"></div>
<div class="box-5"></div>
<div>

.

Flex grow 适用于元素本身，但不适用于容器

Flex grow works on the element itself but not on the container

html

css

flexbox

height

flex-grow