How to Stretch Children to Fill Cross-Axis

How to stretch flex child to fill height of the container?

When using Flexbox, the major mistake is to start using height: 100% all over.

We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.

The solution is simple, just remove the height: 100%, and it will work automatically.

The reason it does, is for flex item in row direction (the default), the align-items control the vertical behavior, and as its default is stretch this just work as is.

Stack snippet

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
    some<br> cool<br> text
  </div>
</div>

Stretch child to 100% width and height without changing the child's rules

"I've found align-items: stretch; for vertical stretching, but can't find something for the horizontal"

But

You can specify flex-grow: 1 for child element and it will fill all available space of the parent.

Here is the example (I have added paddings to parent element just for example, so you can see the difference between parent and child):

.wrapper {  display: flex;  width: 80%;  height: 300px;  background-color: orangered;  padding: 8px;}
.item {  flex-grow: 1;  background-color: forestgreen;}

<div class="wrapper">  <div class="item"></div><div>

How do you make elements expand to fill the cross axis in flexbox?

Basically, using the current structure, flexbox doesn't have an option for that...and it's not really logical that it should.

One the other hand, if the height of the first pseudo-row is known you could use calc to set the height of the second pseudo-row by setting the height of the second div....but it's not really a "flexbox solution".

html {  height: 100%;}body {  height: 100%;  display: flex;  flex-flow: row wrap;  margin: 0;}div {  border: 3px solid red;  flex-grow: 1;}div#a {  flex-basis: 100%;  height: 100px;}div#b {  height: calc(100% - 100px);}

<body>  <div id="a" style="background-color:green">AAA</div>  <div id="b" style="background-color:blue">BBB</div>  <div id="c" style="background-color:yellow">CCC</div></body>

How to horizontally stretch elements when using flex-box

Just add flex:1 to flex items:

.flex-container {  display: flex;  height: 200px;  align-items: stretch;  background-color: DodgerBlue;}
.flex-container > div {  background-color: #f1f1f1;  margin: 10px;  text-align: center;  line-height: 75px;  font-size: 30px;  flex: 1;}

<h1>The align-items Property</h1>
<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>
<div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>  </div>

How to fill vertical space with flexbox?

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>

How to make flexbox with cross axis overflow have the same height?

Use CSS grid instead:

.c {  display: grid;  grid-template-columns:auto 1fr;  width: 400px;  height: 100px;  overflow: auto;}
.empty {  background-color: red;  border: 1px solid;}
.sss {  border: 1px solid;}

<div class="c">  <div class="sss">    <p>sssss</p>    <p>sssss</p>    <p>sssss</p>    <p>sssss</p>    <p>sssss</p>  </div>  <div class="empty">  </div></div>