0

I have three divs in a conainter div. The container is 500px in height. Even after setting the flex grow property to 1 (in the container), the divs don't grow but when set on the elements themselves (child divs within container), they do grow. Is there something I'm missing?

.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>
Gerard
  • 15,418
  • 5
  • 30
  • 52
Yogesh Bhatt
  • 127
  • 2
  • 9

2 Answers2

1

There is nothing wrong with this behaviour. The flex-grow property is meant to be applied on the flex item itself. It specifies how much the item will grow relative to the rest of the flexible items inside the same container.

Prakhar
  • 1,445
  • 9
  • 15
1

No, that is correct. The flex-grow property is intended to be used on a flex item specifically, not on the flex container itself. Applying it to the container will do nothing.

.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>

.

doctypecode
  • 101
  • 5