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> <div>Left</div> <div>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?

1 Answer

• 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> <div>Left</div> <div>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> <div>Left</div> <div>Right</div>
</div>