Grow section without changing wrapper or main
Here is a minimal reproducible example: https://cdpn.io/zachjensz/fullpage/QwbKRYB
I have a
<section> nested within a flex child with display: block that I cannot change, but I need <section> to take up 100% height. Been stuck on this for a while.24 Replies
does
flex-direction: row; on <main> works for you?I cannot change main
nor wrapper
then your choice is to use 100vh or 100dvh
Wouldn't that take full viewport height instead of container height
I have a header and footer is the issue, I left them out of the minimal example
yes it would
I found that when wrapper has
height: 100% along with html and body I can just set height: 100% on <section> and it works. But because of the min height for some reason that doesn't work. But I can't change the damn wrapper stuff as it will impact thousands of legacy componentsyup, it would
Humuhumu
Min height on what?
I'm not on pc but if the min height is on container it might be behaving like that cause min-height doesn't count as an explicit height when set with percentage?
Lol position absolute, width and height 100% on section works but i don't like it
the wrapper my guy
oh epic that works for me then, lemme try it
ayyy ✅ hacky but solved, ty
I never thought to position it lol
I had to deal with percentage height shenanigans not working once with flexbox. I was using min height with percentage same as you then so I had to look up that without explicit height set I have to set position absolute
yea
I might dig into the algo and figure out how it works
probably something to do with layout internals
ty so much, legend!
👍
@Ganesh Position absolute is breaking our header and footer on smaller screen sizes 💀
I tried relative and it didn't work
Thinking maybe a pseudo element that fills the space below
Welp
I don't think I'll be more help here. At least without more reproduce able example on how it breaks
are you talking about this
yes
need blue to be full height
only changing that section element
it happens without position absolute too the problem is somewhere else
talking with my team on how to do this lol, thank you for giving it a shot
will let you know what we come up with
cool
👌
@Ganesh We decided to go with a mobile single column view after discussing with design team
as the new architecture we're moving to will be single column and this layout is the old architecture
avoids the problem entirely 😅
Lol great. I wasn't happy about using absolute position hack
Yea it didn't work, broke on small screens
would have been great if it did work lol