Flex container's item heights not working
i have a flex container in which i have 2 items im trying to set height of one particular item but im unable to
41 Replies
height 50% doesnt seem to have an effect
The size of a flex container is set by the content. You shouldn’t be setting heights at all, content and padding should make the height.
https://youtu.be/I4gUvhG7uFU?si=hK0XSq1tQXgPA-P9
Kevin Powell
YouTube
The problem with percentages in CSS
We used to have to rely a lot on percentages for our layouts in CSS, but with modern CSS layouts using Flexbox and Grid, they can often be avoided.
✅ What unit to use in what situation: https://youtu.be/N5wpD9Ov_To
✅ How to decide when to use Flexbox or Grid: https://youtu.be/3elGSZSWTbM
⌚ Timestamps
00:00 - Introduction
00:37 - Very simple gr...
i see
i was trying to achive something like this
I think this is more like the video I wanted to show you, kp has one similar but can’t find it
https://youtu.be/-sF5KsEo6gM?si=Qp2yf7k2y2bejFw6
Web Dev Simplified
YouTube
Are You Making These CSS Height Mistakes?
FREE CSS Selector Cheat Sheet: https://webdevsimplified.com/specificity-cheat-sheet.html
Heights in CSS are a pain to deal with. They almost never work as you expect and they always seem to be larger or smaller than you want them to be. In this video I will show you why things like height: 100% do not work like you expect and what you can do to...
was this alwase the case? or it changed recently cuz i fairly remember setting heights and widths on flex boxes
also changing the height of a flex item inside the flex box will change the flex container's height?
I can’t tell what the parent of ._Container_cwd is doing. Why are you trying to give it a height at all if you’re going for this example?
Give it some padding a gap or margin in between and use flexbox alignment tools.
Clicking on the icon next to display:flex; gives you all the alignment options
parent is the root ofc and it has min-h 100vh
You can set fixed heights but percentages work differently on flex children
i see
So then set min-height to 100vh
% work diff on flex ch
If the parent doesn’t have a fixed height
ill just watch those two vids and come back i think im missing something
Otherwise the flex parent is determined by the content inside, the children
But for what you’re trying to achieve you don’t need a height
This example is just using padding and the elements inside
also lets say the hearder is not flex hand the parent of the header os not flex either even thos the h 10% on the header dosent work the parent h is min-h 100vh so its taking up the whole screen
Did you watch the videos? They explain how percentages work on heights better than I can
watching
Height are looking at the containing block, which is usually parent but depending on your code may have changed if you’ve declared some properties
containing block
It can also help to put outlines on your elements so you can see the size , if there’s not a bg sometimes you think an element is one size but your property didn’t assign or something else like flex shrink is coming into play. Flex by default shrinks the container to be the size of the content + padding. I’m not at a laptop right now to show you. Your header may be 10% but the contents inside are still their size. So keep an eye on it with outline: 2px solid red;
That’s the parent but there is the possibility of some properties on the children that may have moved their containing block to not be the parent. This is why we encourage people posting their code because so much in CSS “depends” on other things , so we only have one piece of the puzzle. If you post a link to your live code the next person that comes along may be able to help you.
Also be careful mixing ID selectors and class selectors in your css , IDs raise specificity unnecessarily and then you can run into big issues of your properties not being applied and you can’t overwrite. If you don’t want to give it a class, use [id=“root”] as your selector instead of #root
here i cant upload my code for various reasons but i and zip it and send it in discord
Kevin Powell
YouTube
One of the most common CSS issues people run into
Feel like you have the basics of CSS down, but you still get frustrated by it? I have a course just for you! 👉 https://cssdemystified.com?utm_campaign=general&utm_source=youtube&utm_medium=min-height-percentage
When we declare the height of an element as a percentage it has to be based on the height of the parent element. A lot of people know t...
I think zip files are against the rules but maybe someone will take the risk 🤣
TLDR: OP has a container, #root, set to min-height: 100vh. Inside it has a header and a container , both flex-boxes. OP is trying to set a min-height of 50% on the flex-children inside flex container inside of root and it’s not working . The min-height of 10% on the header is not working either. They have attached a zip file of their project (open at your own risk!)
oh i didnt know the sending zip is against the rules
sorry about that
My suggestion is to just use grid. I don’t work with heights other than an occasional 100vh min height on the body so not sure what is going on. Probably something to do with the height vs min-height in a percentage but hopefully someone can help!
no biggie, just please remove the attachment and share your code through github or something
is there any other safe way to send ?
anything plain text is fine
too many files to send as a plain text lets see is git lab ok?
yup, as long as it's not a binary attachment in discord
and obviously publicly accessible
here
Also thinking about it you could try to use the height property instead of min-height
[id=root]{height: min(100vh, 4000px); and then if your .container{height:50% } would work
But I’ll let Jochem take over , heights aren’t my fortethx for linking the vids guys i have fixed it
We’re invested now, what did you do?
Instead of using height
I used padding and margins on the flex items and flex grow properties on the container
🙏🏻 see?
height declarations always cause more issues than they solve. Much easier to use padding and other tools available! So glad we came full circle 🤣🤣yes
@👻Ghost in Your pants👻 I'm curious on how you implemented this. Can you share your code or any link? Here's mine: https://codepen.io/i4mabdul/pen/gOEWXaP
dm me @Rozam