CSS Grid item overflow if container height is full height

Question

I want to have a container that has a toolbar and a very long list.

The toolbar should use the space it needs and the list should use the available space and should overflow with scrollbars if it is too large.

I don't want to set a fixed height to the container, toolbar or list.

Other questions say it works with minmax but this doesnt seem to work.

Currently the overflow is over the whole container but i want the overflow only on the list

.container {
  display: grid;
  grid-template-rows: max-content minmax(0, auto);
}

.item {
  min-height: 0;
  min-width: 0;
  overflow: auto;
}


/* for demo purpose*/

.toolbar {
  background-color: #2569af;
  padding: 8px;
}

.dummy {
  width: 30vw;
  height: 200vh;
  background-color: #787850;
}

body {
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="item toolbar">
    <button>Foo</button>
  </div>
  <div class="item list">
    <div class="dummy">this could be a very long list</div>
  </div>
</div>

Codepen

Tried using using max-height and overflow: auto?

joshwcorbett
– joshwcorbett

2022-08-03 16:03:24 +00:00
Commented Aug 3, 2022 at 16:03 — joshwcorbett
– joshwcorbett, Commented Aug 3, 2022 at 16:03
Yes - on container and item but with no effect

schloemi
– schloemi

2022-08-03 16:07:30 +00:00
Commented Aug 3, 2022 at 16:07 — schloemi
– schloemi, Commented Aug 3, 2022 at 16:07

Syden · Accepted Answer · 2022-08-03 16:33:26Z

1

Would you consider flexbox instead? I'd put it this way:

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  height: 100%;
}

.toolbar {
  width: 100%;
  background-color: #2569af;
  padding: 8px;
}

.list {
  display: flex;
  flex-flow: row wrap;
  flex: 1;
  width: 200px; /* tweak to desired */
  overflow: auto;
}

.dummy {
  background-color: #787850;
}

<div class="container">
  <div class="item toolbar">
    <button>Foo</button>
  </div>
  <div class="item list">
    <div class="dummy">this could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long listthis could be a very long list</div>
  </div>
</div>

edited Aug 3, 2022 at 16:33

answered Aug 3, 2022 at 16:27

Syden

8,6455 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

schloemi Over a year ago

Is there a reason to set the border-sizing on all elements or is it on .item enough?

Syden Over a year ago

Actually it's just a way to treat all boxes content consistently, this kind of setting usually comes also with frameworks/tools like bootstrap, normalize, material, etc. Since this snippet has no framework, I just set it manually. Depending on whether you are using other tools/frameworks, it's likely you have this already. Hope this answers you.

Collectives™ on Stack Overflow

CSS Grid item overflow if container height is full height

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related