Grid container doesn't fit content

[Mori]

Sample code:

CSS

#grid-container {
  display: grid;
  outline: 1px solid green;
}

#content {
  background: aqua;
  height: 50%;
  overflow: hidden;
}

HTML

<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>

DEMO

Problem: The grid container’s height is 90px, while the content’s height is 45px on my computer and there’s an unwanted gap.

Questions: Why does it happen? How can we remove the gap?

[PaulOB]

@Mori

Why does it happen? How can we remove the gap?

Think about what you are asking for

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?

[Mori]

@PaulOB

The height of the grid is dictated by the height of its content

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;
}

@PaulOB

I can’t think what effect you require so you may need to explain what you want to achieve?

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.

[PaulOB]

@Mori

You’re right, but isn’t height: 50% and height: 45px basically the same in my example?

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.

[Mori]

@PaulOB

I’m having a hard time visualising a use case for this? Why fd you want to hide half the content?

Fifty percent is just an example: It can be any number.

@PaulOB

Otherwise I think you are stuck with using js to do it.

It’s a pity! Otherwise we would be able to resolve the height transition to auto problem:
Using CSS Transitions on Auto Dimensions

[PaulOB]

The auto transition is not solvable as I’ve tried many times over the last ten years ( or however long it’s been around).

The closest method is the max-height transition which is ok as long as you have a rough idea of how tall the element will ever be.

Nothing else comes close.

[Mori]

@PaulOB

The auto transition is not solvable

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.

[TechnoBear]

@Mori

I’m not happy with it, though as you’d have to put the rest of your page content inside the flex container.

It’s also inaccessible to keyboard navigation and touch.

[PaulOB]

@Mori

However, I went on and came up with the following solution:

That’s a good effort

It solves a height auto transition but of course that is not the whole story as there are also transition to auto widths etc.

That method fails in Safari and IOS unfortunately otherwise I would have added it to my demo from 8 years ago :slight_smile:

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

[Mori]

@PaulOB

I need to look at this again

I really appreciate it if you share your findings with us!

[Mori]

Dear Paul,
Would you help me understand why the expandable content gets too large on hover if I add another expandable division to the page? DEMO

[John_Betong]

@Rain_Lover, @PaulOB ,

Perhaps you could adapt the following by adding hover to the current user interface which requires clicking to display the responsive div contents.

file: tabs.css

.tab {
 position: relative;
 width: 94%;
 max-width: 600px;
 margin: 1em auto;
 border-radius: 1em;
} /* [THE LABEL] */
.tab input {
 display: none;
}
.tab label {
 display: block;
 background: #2d5faf;
 color: #fff;
 font-weight: bold;
 padding: 10px 0 10px 32px;
 cursor: pointer;
}
.tab label::after {
 content: "\25b6";
 position: absolute;
 left: 10px;
 top: 10px;
 display: block;
 transition: all 0.4s;
}
.tab input[type=checkbox]:checked + label::after,
.tab input[type=radio]:checked + label::after {
 transform: rotate(90deg);
}
.tab-content {
 overflow: hidden;  /* CSS animation will not work with auto height */  /* This is why we use max-height */
 transition: max-height 0.4s;
 max-height: 0;
 background: #ddd;
}
.tab-content p,
.tab-content div,
.tab-content table,
.tab-content section {
 margin: 0.88em;
 min-height: 4.2em;
 max-height: 88em;
 overflow: auto;
 border: solid 1px #ddf;
 border-radius: 0.88em;
 background-color: snow;
 max-height: 100vh;
 text-align: left;
}
.tab input:checked ~ .tab-content {  /* Set the max-height to a large number */  /* Or 100% viewport height */
 max-height: 100vh;
}
html,
body {
 font: 16px/1.55 BlinkMacSystemFont, "Segoe UI",  Roboto, Helvetica, Arial, sans-serif;
 border:0;
 margin:0;
 padding:0;
 background-color: #fefefe;
 color:#333;
}

Edit:

Just noticed that the original Topic is about CSS Grid problems not being responsive.

Using CSS Tabs partially solves the responsive problem except for the hover… please feel free to delete this post if it is completely off-topic.

[PaulOB]

@Mori

Would you help me understand why the expandable content gets too large on hover i

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.

I can’t see a solution at the moment though

[PaulOB]

@PaulOB

I can’t see a solution at the moment though

This works well in Chrome and Firefox but not in Safari.

[Mori]

I just realized that changing flex: 0 to flex-basis: 0 resolves the issue. Still doesn’t work in Safari.

[PaulOB]

My version works in Safari but just doesn’t animate

edit: Yours also works in Safari without the animation.