Menu
Getting the child of a flex-item to fill height 100%Set position: relative; on the parent of the child. Set position: absolute; on the child. You can then set width/height as required (100% in my sample).
You can use the flex-grow property to force an item to fill the remaining space on the main axis of a flex container. The item will expand as much as possible and occupy the free area.
A flex container expands items to fill available free space or shrinks them to prevent overflow. Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
The flex-start value of the justify-content property allows you to place the items at the start of the container. The flex-start indicates the flex-direction while the start indicates the writing-mode direction. The children of the parent container are allowed to align at the start of the parent container or div.
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>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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With