I have an outer div divO that has a min and max height. I want divO height to be driven by the inner div divI that will have varying amounts of content. So as content grows in divI, divO and divI height grows until the divO height hits max value.
The problem I ran into is I can’t get the bottom edge of divI to anchor off of the bottom edge of divO (but I can get the top edge to anchor off the top edge of divO).
Put the min and max heights on div1 not div0 and then use a margin top and bottom on div1 instead of relative positioning.
Roughly like this:
You will rarely move stuff with position relative as it moves the element visually but not physically. The element will always preserve the space where it was originally as though it had not been moved.
Thanks for that, especially about relative positioning. I had divI with min/max to begin with, but now I can’t remember why I wanted to reverse it (divO controlling height).
So, removing relative position in your example doesn’t make any difference. Do you know the reason for that?
Why does the outer div not honor the inner div height and adjust with the divI height? (divI overflows divO in my example)
That’s because there are no co ordinates to move it so it stays where it was. If you add top:40px as in your example then combined with position: relative you would see it move.
That’s because you gave a maximum height to the outer div. It will never grow bigger than that measurement no matter what is inside. You need to control the overflow if you are going to use fixed heights.
Generally you will avoid using fixed heights on elements that hold fluid content like text as that won’t be responsive or usable. A user could resize their text only from their browser controls and your element will overflow.
You need to use more robust and fluid methods to achieve a responsive design.
Right, I understand the responsive part. In my case, the inner div (and implicitly the outer) needs to be controlled to some maximum to fit the overall design. It is okay if the text overflows and causes a scroll bar.
What I don’t understand is that divO does not adjust (up to its maximum) according to change in divI. I wanted divI to be constrained to divO since divO is the container. I was hoping divI could flex with the change in divO (just like if you reverse assignment of the height properties).
I guess I’ll have to put the height back on the inner div.
Yes it does! In your example div0 will stop at its max height should div1 have enough content. If div1 has too much content then the content will spill out unless you control the overflow. Note that it is bad UI to have lots of scrolling boxes so you want to avoid that if possible.
I’ve given you an example in the codepen above that does exactly what you are asking for and is the way you should approach this. What is it that you don’t like about it?
When you put a height on a container any children will not have that height. The children will be the height of their content only. That’s why it’s preferable to let the inner items dictate the height of the outer and not the reverse. The result is exactly what you are asking for.
There are ways of using display:flex on the outer and then children can be made to stretch to the height of the parent but for your simple use case that seems unnecessary.
Maybe if you could explain a bit more detail of your intended layout we could offer other methods.
Yes, your solution does what I wanted visually, and that is the same as I had before I posted. But, for some reason that I’m not sure of now I wanted the logic to be reversed. I think it was because of a problem I still need to solve with the bottom half of the page, but now that I think about it some more, it may not matter what drives the height.
The design is for the bulk of the page to have the more important information, and the top is for reference as the bottom is consumed by the reader. I’ll try to size the top so that scrolling should be rare.