Menu
I need to stretch yellow child to fill all height of parent. Without setting parent height. Height of parent should be dependent on blue child text. https://jsfiddle.net/7vaequ1c/1/
<div style='display: flex'> <div style='background-color: yellow;height: 100%; width: 20px'> </div> <div style='background-color: blue'> some<br> cool<br> text </div> </div>
713
Getting the child of a flex-item to fill height 100%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.
You have to give the section a height to limit it to cause the buttons to wrap, otherwise the flex element will just grow to fit the height of whatever's inside of it. I would use height: calc(100vh - 100px) on the flex container to make it take up all of the available space.
The flex-basis property sets the initial length of the flex-items inside a flex-container. You can think of it as an improved version of the width or height values. That is, flex-basis has always prevalence over width or height .
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>If I understood correctly, you are looking for the align-items property, which defines the layout along the cross axis, in this case vertically.
You can find a good overview here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.flexbox { display: flex; flex-direction: row; justify-content: center; align-items: stretch; // <-- stretch vertical (default value, can be omitted here) align-content: center; } .box { padding: 1em; text-align: center; margin: 1em; } .box--yellow { background-color: yellow; } .box--blue { background-color: blue; color: white; }<div class="flexbox"> <div class="box box--yellow"> yellow </div> <div class="box box--blue"> some<br> cool<br> text </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
