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. ❤️
7 Replies
because your flex-container does not have a height by default, so the childs do not have space to grow in
So even if I try to manipulate the height of child, the "flexbox" wouldn't "flex" because it has no space to do so? Isn't the point of flexbox to flex in relation to children or have i misinterpreted this relationship?
Sorry to bother you with this shit
no, it's the other way around. flex items adjust to the container
Right thank you boss
Fucking hell ❤️
you can do it with grid btw
here the container says that all the items do need the same height (1fr)
Thanks again, I know I can do it with grid 👍
I'm just taking my time to try and "really" understand how things work and try boundaries, etc. I assume it will be beneficial later, so I don't have to backtrack as often and have an easier time implementing ideas because I could visually think how elements would react/interact Hence the question; once again, thank you for your help!
I'm just taking my time to try and "really" understand how things work and try boundaries, etc. I assume it will be beneficial later, so I don't have to backtrack as often and have an easier time implementing ideas because I could visually think how elements would react/interact Hence the question; once again, thank you for your help!