How to fill vertical space with flexbox?

Question

If .right item stretch height to any size, how to make .item elements inside .left to fill vertical space equally?

From:

To:

.container {
  display: flex;
  background: #ccc;
}

.left {
  flex: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  height: 100%;
}

.right {
  flex: 1;
  border: 1px solid #000;
}

.item {
  border: 1px solid #000;
  flex: 1 0 100%;
  align-self: stretch;
}

<div class="container">
  <div class="left">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

https://jsfiddle.net/d7o58kaj/1/

score 12 · Accepted Answer · edited May 23 '17 at 11:55

An initial setting of a flex container is align-content: stretch.

That means that flex lines will equally share all available space in the container along the cross axis. (A similar effect to flex: 1 on all items on the main axis.)

However, when you define a height for a flex item when the cross axis is vertical, or width, when the cross axis is horizontal, you override the align-content default.

In your row-direction container, the cross axis is vertical. So if you remove height: 100%, that allows align-content: stretch to work.

Learn more about flex alignment on the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Learn more about flex alignment on the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

.container {
  display: flex;
  background: #ccc;
}

.left {
  flex: 2;
  display: flex;
  flex-wrap: wrap;      /* <--- this brings align-content into play */
  /* flex-direction: row;  <--- default setting; can be omitted */
  /* align-items: stretch; <--- default setting; can be omitted */
  /* height: 100%; */
}

.right {
  flex: 1;
  border: 1px solid #000;
}

.item {
  border: 1px solid #000;
  flex: 1 0 100%;
  align-self: stretch;
}

<div class="container">
  <div class="left">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

score 3 · Answer 2 · answered May 18 '17 at 13:01

Removed height: 100% from .left

.container {
  display: flex;
  background: #ccc;
}

.left {
  flex: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

.right {
  flex: 1;
  border: 1px solid #000;
}

.item {
  border: 1px solid #000;
  flex: 1 0 100%;
  align-self: stretch;
}

<div class="container">
  <div class="left">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
  <div class="right">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

Explain why this works, as just drop a code is pretty useless — Asons, May 18 '17 at 14:01

score 0 · Answer 3 · answered Apr 22 '22 at 16:37

0

You can use flex property


align-items: stretch ;

for achieving this.

answered Apr 22 '22 at 16:37

santhini s

41
2

How to fill vertical space with flexbox?

3 Answers3

Linked