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
No description
41 Replies
👻Ghost in Your pants👻
height 50% doesnt seem to have an effect
clevermissfox
clevermissfox11mo ago
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...
👻Ghost in Your pants👻
i see
👻Ghost in Your pants👻
i was trying to achive something like this
No description
clevermissfox
clevermissfox11mo ago
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...
👻Ghost in Your pants👻
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?
clevermissfox
clevermissfox11mo ago
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
👻Ghost in Your pants👻
parent is the root ofc and it has min-h 100vh
clevermissfox
clevermissfox11mo ago
You can set fixed heights but percentages work differently on flex children
👻Ghost in Your pants👻
i see
clevermissfox
clevermissfox11mo ago
So then set min-height to 100vh
👻Ghost in Your pants👻
% work diff on flex ch
clevermissfox
clevermissfox11mo ago
If the parent doesn’t have a fixed height
👻Ghost in Your pants👻
ill just watch those two vids and come back i think im missing something
clevermissfox
clevermissfox11mo ago
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
👻Ghost in Your pants👻
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
No description
clevermissfox
clevermissfox11mo ago
Did you watch the videos? They explain how percentages work on heights better than I can
👻Ghost in Your pants👻
watching
clevermissfox
clevermissfox11mo ago
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
👻Ghost in Your pants👻
containing block
No description
clevermissfox
clevermissfox11mo ago
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
👻Ghost in Your pants👻
here i cant upload my code for various reasons but i and zip it and send it in discord
clevermissfox
clevermissfox11mo ago
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...
clevermissfox
clevermissfox11mo ago
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!)
👻Ghost in Your pants👻
oh i didnt know the sending zip is against the rules sorry about that
clevermissfox
clevermissfox11mo ago
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!
Jochem
Jochem11mo ago
no biggie, just please remove the attachment and share your code through github or something
👻Ghost in Your pants👻
is there any other safe way to send ?
Jochem
Jochem11mo ago
anything plain text is fine
👻Ghost in Your pants👻
too many files to send as a plain text lets see is git lab ok?
Jochem
Jochem11mo ago
yup, as long as it's not a binary attachment in discord and obviously publicly accessible
clevermissfox
clevermissfox11mo ago
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 forte
👻Ghost in Your pants👻
thx for linking the vids guys i have fixed it
clevermissfox
clevermissfox11mo ago
We’re invested now, what did you do?
👻Ghost in Your pants👻
Instead of using height I used padding and margins on the flex items and flex grow properties on the container
clevermissfox
clevermissfox11mo ago
🙏🏻 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 🤣
👻Ghost in Your pants👻
🤣yes
Abdul Rehaman Shaikh
@👻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
Abdul
CodePen
Demo
...
👻Ghost in Your pants👻
dm me @Rozam
Want results from more Discord servers?
Add your server