I know there is a command that can help me achieve this but i cannot find it anywhere.
I just want that when my elements that are inside another element to behave with the proportions of that element, If I give 100% width or height, I want them to have a limit from their outer parent, in this case its not working, I have height 100% and its overflowing, I hope some of you helps me remember that single line of code q_q
9 Replies
can you show us the whole code? in a codepen would be great
If it’s inside another element, height 100% should work, can you share your codepen?
The navigation that had its own space too, and took away 2.5rem, so I did 100% - 2.5 and it got fixed, but I know for sure I have seen in some tutorial that there is a code that overrides this thing, it makes it so even the corners of the parent element apply to that child element, i will share codepen soon
overflow: hidden?
it's not a good solution to this problem btw, but it would probably hide the problem
your solution with calc is the proper one, then you can hide the overflow for the corners
https://codepen.io/harunjonuzi/pen/bGOoBGy
just go inside .aside {} class
and remove the calc function from height
just make it 100% height
and it will go further
I think you're thinking of
overflow: hidden; on .applicationYou’re setting fixed heights on things you probably shouldn’t be too.
The container holding your aside has a fixed height and so does your navigation, my guess is it’s trying to take up 100% and your navigation is pushing it down, I haven’t tried it though, perhaps try letting the children decide the height of the navigation and if you really want a height on your container use min height .
That 100% means 100% of the parent, once you add padding and margins on top, or other elements, it's going to get screwy. AFAIK there's no way on a single element to say "take up the rest of the space" without using grid or flex
though grid is a perfect solution to use for a layout like this
^^^