How to stretch children to fill cross-axis?

I have a left-right flexbox:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 70vh;
  min-height: 325px; 
  max-height:570px; 
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

The problem is that the right child is not behaving responsively. To be specific, I want it to fill the height of the wrapper.

How to accomplish this?

Solution 1:

The children of a row-flexbox container automatically fill the container's vertical space.
Specify flex: 1; for a child if you want it to fill the remaining horizontal space:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}

.wrapper>.left {
  background: #fcc;
}

.wrapper>.right {
  background: #ccf;
  flex: 1;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Specify flex: 1; for both children if you want them to fill equal amounts of the horizontal space:

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 5em;
  background: #ccc;
}

.wrapper>div {
  flex: 1;
}

.wrapper>.left {
  background: #fcc;
}

.wrapper>.right {
  background: #ccf;
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

How to stretch children to fill cross-axis?

Solution 1:

Related

Recent Posts