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
MarkBoots
MarkBoots13mo ago
because your flex-container does not have a height by default, so the childs do not have space to grow in
bernie
bernie13mo ago
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
MarkBoots
MarkBoots13mo ago
no, it's the other way around. flex items adjust to the container
bernie
bernie13mo ago
Right thank you boss Fucking hell ❤️
MarkBoots
MarkBoots13mo ago
you can do it with grid btw
.container {
display: grid;
grid-auto-rows: 1fr;
}
.container {
display: grid;
grid-auto-rows: 1fr;
}
here the container says that all the items do need the same height (1fr)
MarkBoots
MarkBoots13mo ago
No description
bernie
bernie13mo ago
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!
Want results from more Discord servers?
Add your server