Need help to understand behavior of overflows within a specific layout
Hi, I wanted to create a scrollable list of cards/items within my content layout, but I can't get the height of the content container with overflow items right.
Sample code here:
https://codepen.io/PBN17/pen/xbxRqMo
From what I imagined, the content-scrollable and content-right which has been set to 100% height should have the height of 100vw - 90px (from header) but that doesn't seem to be the case as their height is still 100vw.
Thanks for the guidance in advance!
15 Replies
the
.content-scrollable has height: auto, which is based on the height of the children
the .content-right has 100% of the height of .content
.content has 100% of the height of .content-wrapper
.content-wrapper has height: auto
i don't know where you got that 100vw - 90px
you don't even use calc anywhere, so ... are you missing code?
@mod #📝rules #7True alarm lol
lol
@ἔρως i don't know where you got that 100vw - 90pxahh sorry I wasn't being clear enough, what I meant was that I imagined as
.content-wrapper is set to flex with direction on column, height was set as auto with its parent set to 100vh , as .content-header was already occupying the top 90px, I assumed .content height's set to 100% would be 100vh - 90px is that not how it works? If so how could I achieve it without hardcoding the value?no, that's not how it works
.content will be 100% the height of the parentI realize that his is just a test/demo but grid would be far better suited to this...
That said, where did you have your 100vh -90px? (it isn't in your current Codepen).
When you use vh units (or any other viewport based unit) you are defining a percentage (1vh = 1%) of the viewport itself and totally disregarding the size/height/width of the parent elements.
Bear in mind that your html elements have default padding and margins - none of these will be taken into account when using vh.
So, if you want a child element to have x% height of it's parent, the unit needs to be relative to the parent, not the viewport.
In summary, if you used
100vh - 90px on the content element, that would not be relative to the content-wrapper but to the viewport.
Epic also mentions that you hadn't used calc() anywhere so if you had just done height: 100vh - 90px that wouldn't have done anything anyway - you would basically have been telling the content element to have height: auto (the default).
If you set
You should get closer to what you want.
An alternative, more modern CSS approach would be to define the content with container-type: size;. This the size to that if it's parent.
also, keep this in mind:
-
.wrapper has 100vh of height
- .content-wrapper has 100% of height = 100vh
- .content has 100% of height = 100vh
- .content-scrollable also has 100% of height = 100vh
this is why .content-scrollable is the same height as everything else, instead of being 100% - 90px
that element has absolutely no idea that the .content-header already has an element there - and it doesn't care
when you say height: 100%, normally, it means "100% the height of the parent", and not "100% of the available height"I see, so the goal I had in mind and why I don't really want to hardcode the value is because in cases where I already had several elements nested in the same direction, I wanted to avoid calculating all the existing elements' total width for instance, and define the new element to fill the space up to the root container's width.
I haven't tried to use grid yet like @Chris Bolson mentioned, as the elements width could varies in min/max sizes, but would the "100% of the available height" works in a nested grid?
With the
container-type: size; method you don't need to know any values, it calculates it automatically.okay, I'll try play around with that!
Thanks a lot for the helps!
A quick fork of your pen (I will delete later) to show the container-type solution.
I have increased the content of the header and added an extra element to show how the height is calculated automatically with no hardcoded values.
That's perfect, @Chris Bolson ! Thank you!
And I just searched for container-type keyword and found https://www.youtube.com/watch?v=DHj7JhH8 as well, sweet!
A grid version just for reference to hopefully see how grid would be better suited than flex - far less values to define to get the same result
Oh that's much cleaner than before, I haven't explored grid much but does defining the template col/row as auto makes them try to fit the content?
Yes, setting
auto pretty much anywhere (but there are probably a few exceptions) means that the size (width or height) will be defined by the contents.