How to fill vertical space with flexbox?
If the .right
height of the element stretches to any size, how do you make the .item
elements inside .left
to fill the vertical space evenly?
FROM:
To whom:
.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>
source to share
The initial setup for a flex container is . align-content: stretch
This means that flex lines will equally distribute all the free space in the container along the transverse axis . (Similar effect for flex: 1
all elements of the main axis.)
However, when you define the height of a flex item when the cross axis is vertical or the width when the cross axis is horizontal, you override the align-content
default.
In a container with a vertical arrow, the cross axis is vertical. Therefore, if you uninstall height: 100%
that lets you align-content: stretch
work.
Learn more about aligning flexion on the transverse axis:
You can read more about aligning flex 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>
source to share
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>
source to share