'How to fill vertical space with flexbox?

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

From: enter image description here

To: enter image description here

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

htmlcssflexbox


Solution 1:[1]

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:

Learn more about flex alignment on the main axis here:

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

Solution 2:[2]

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>

Solution 3:[3]

You can use flex property


align-items: stretch ;

for achieving this.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 athi
Solution 3 santhini s

Related Questions