bernie
KPCKevin Powell - Community
•Created by bernie on 10/10/2023 in #front-end
Flexbox 101: Setting height to box when using flex-direction
Trying to get the hang of how flexbox works on a more fundamental level. How come height is not being able to be manipulated when using columns (in div boxes without content)?
https://codepen.io/spaghettibernie/pen/rNoPqjX
Let's say you wanted to space up the div boxes to take more space, what would be an effective way to do that? "flex:1;" (flex-grow:1) does not seem to do anything here. Entering "test" into one of the div-boxes does extend it, but it limits itself to the content (block-type behavior).
I can set the .flex-container to "height: 100vh;" and that "solves it", but why do I have to specify the containers height here? What am I missing in my understanding and what is your way of looking at how flexbox works/operates? Why can't I just manipulate the "height:400px" value in the div-class for the items?
I appreciate any explanation or just a link to where this behavior is showcased, thanks to anyone who's taking their time to respond. ❤️
9 replies