CODEWITHSUNDEEP
htmlcssflexbox
KevBot
KevBot

Reputation: 18908

Why is a flex container not growing based on a nested flex container child

When I have multiple nested flexbox items, I cannot get the parent element to honor the actual height of its children. Here is what I mean:

Issue:

enter image description here

Desired:

When there is content in these cells, it should squish the rows that do not have content until the minimum height is reached of the parent element. After that, it should grow past the minimum height:

enter image description here

When there is little content in the cells, the rows should take up an even amount of space up until the minimum height (this is already working):

enter image description here

My Markup:

.weeks {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.week {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.days {
  flex: 1;
  display: flex;
  background-color: lightblue;
}

.day {
  border: 1px solid black;
  flex: 1;
}
<div class="weeks">
  <div class="week">
    <div class="days">
      <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae.
      </div>
      <div class="day">1</div>
      <div class="day">1</div>
    </div>
  </div>
  <div class="week">
    <div class="days">
      <div class="day">1</div>
      <div class="day">1</div>
      <div class="day">1</div>
    </div>
  </div>
  <div class="week">
    <div class="days">
      <div class="day">1</div>
      <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae.
      </div>
      <div class="day">1</div>
    </div>
  </div>
</div>

How can I solve this using flexbox?

Upvotes: 4

Views: 415

Answers (1)

coreyward
coreyward

Reputation: 80140

You've set the flex-basis property to 0 on .week. Leave it unset and the issue goes away. If you want the .week element to have a minimum height, set that property on the .week selector.

.weeks {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.week {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.days {
  flex: 1;
  display: flex;
  background-color: lightblue;
}

.day {
  border: 1px solid black;
  flex: 1;
}
<div class="weeks">
  <div class="week">
    <div class="days">
      <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae.
      </div>
      <div class="day">1</div>
      <div class="day">1</div>
    </div>
  </div>
  <div class="week">
    <div class="days">
      <div class="day">1</div>
      <div class="day">1</div>
      <div class="day">1</div>
    </div>
  </div>
  <div class="week">
    <div class="days">
      <div class="day">1</div>
      <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae.
      </div>
      <div class="day">1</div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions