<div id="grid-container">
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div>Another element</div>
You say you want the content div to be 50% of the grid-container but how can it be 50% if you want the grid container the same height as the content? If the grid container shrunk to fit the content then the content would no longer be 50%.
The height of the grid is dictated by the height of its content so you get exactly what you asked for. The content is half the size of the grid.
I don’t see what else you thought would happen
What is it you want to achieve? Remember for something to be 50% of something else the something else must have a height that allows you to obtain the 50%.
I can’t think what effect you require so you may need to explain what you want to achieve?
You’re right, but isn’t height: 50% and height: 45px basically the same in my example? If I explicitly size the content div in pixels, the gap disappears:
#content {
height: 45px;
}
I’d like the container to grow and shrink with the content without explicitly mentioning the content’s or container’s height in pixels, or “Another element” to go up and down on the page as the content’s height changes.
Not really 45px is a fixed measurement but 50% is half the height of the container.
50% may indeed equal 45px but only when the container is 90px. The fixed 45px height has no such requirements placed on its parent container. If the grid container shrunk its height to 45px then the content would need to be 22.5px and so on until it disappears up its own axis.
I’m having a hard time visualising a use case for this? Why fd you want to hide half the content?
Maybe you are looking for something like line-clamp but you can only set it to a fixed number of lines.
Or alternatively if you don’t want the content specifically readable then you could set the width of Content to 200% and hide the overflow on the grid container. That will get you half the height but of course not a readable sentence.
Otherwise I think you are stuck with using js to do it. e.g. based on your codepen example.
When Paul calls an issue unsolvable, I’m sure nobody else can solve it (for now). However, I went on and came up with the following solution: Expanding/collapsing in the document flow
I’m not happy with it, though as you’d have to put the rest of your page content inside the flex container.
I suppose I should have said that the auto transition hasn’t been solved fully yet. Mind you I haven’t fully tested with flex or grid so there may indeed some areas that can be made to work but not as a full solution for all auto transitions.
However you have tweaked my curiosity and I need to look at this again
It seems as though the content that is hidden with flex:0 is added to the expanding div’s height. If you add 2 or three more elements (or more content in the second one) the space gets bigger and bigger on the hover element. I guess its taking into account all the hidden content.
It’s very interesting and unexpected but both Firefox and Chrome do it the same.