overflow scroll breaks in nested grid (2)

Question

First of all, I'm aware of this post, which already has an answer. However, I'm unable to apply the solution to my layout and haven't found a way out in ages...

The problem is the following: I have a CSS grid inside of another CSS grid. One of the inner elements has overflowing content, and I need that specific element to be scrollable, while the parent CSS grid (and everything else) keeps their size fixed.

This is my code (simplified for JSFiddle): https://jsfiddle.net/sd3v95o6/41/
This is Michael's solution (from the other post): https://jsfiddle.net/b24kcwmy/

Snippets:

* {
  margin: 0;
  padding: 0;
}

#root {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 3fr;
  height: 100vh;
}

nav {
  grid-row: 1;
}

main {
  grid-row: 2;
}

div {
  overflow: auto;
}

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#a {
  grid-column: 1;
  grid-row: 1;
  overflow: auto;
  background-color: lightgreen;
}

#b {
  grid-column: 2;
  grid-row: 1;
  background-color: lightcyan;
}

#c {
  grid-column: 1;
  grid-row: 2;
  background-color: lightpink;
}

#d {
  grid-column: 2;
  grid-row: 2;
  background-color: lightyellow;
}

<div id="root">
  <nav>
  Navbar
  </nav>

  <main>
    <div id="container">
      <div id="a">A</div>
      <div id="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis massa egestas, placerat ante et, ultricies eros. Duis vel feugiat dolor. Integer et auctor turpis. Proin lobortis dolor at justo condimentum lobortis. Curabitur viverra mauris leo, sed condimentum orci blandit at. Quisque tincidunt placerat ipsum ut rhoncus. Suspendisse molestie nulla vel justo imperdiet pellentesque. Donec dapibus massa felis, vitae ultricies lectus fermentum non. Nullam commodo consequat ligula, ac mollis tellus malesuada a. Nullam consequat ut libero ac elementum. Ut viverra ac sapien sit amet viverra. Sed at augue vel nisi finibus efficitur. Donec interdum magna at lorem congue, et gravida eros pulvinar. Nulla pretium, felis nec consectetur maximus, sem lectus ullamcorper lacus, volutpat vestibulum ligula velit sed magna.

  Quisque felis nibh, tempus quis porttitor id, blandit auctor felis. Curabitur in imperdiet ex. Ut sit amet massa id justo viverra sodales eu id ligula. Fusce porta iaculis sem, at lobortis purus hendrerit sed. Ut at viverra nisl. Mauris non enim nibh. Vestibulum eleifend quam ac nunc convallis, eget viverra urna hendrerit. Cras tincidunt tristique lorem, eu tristique tortor tincidunt eget. Suspendisse convallis ut libero in tempor. Cras non placerat ligula. Integer accumsan volutpat pellentesque. Mauris nec urna vitae urna scelerisque ultrices sed sed turpis. Quisque ullamcorper nulla nec dignissim vehicula. Cras elit sem, tempus quis mi id, euismod ornare metus.

  Nam erat elit, aliquam nec est sit amet, suscipit porttitor diam. Sed consequat laoreet magna vel efficitur. Proin aliquet eget arcu eget semper. Etiam convallis mi in gravida congue. Aenean elit quam, consequat non libero sed, tincidunt mattis nunc. Integer lectus risus, aliquet ut nunc posuere, vehicula varius mi. Quisque ultrices justo nec ipsum volutpat, eu congue metus vehicula. Quisque vel eleifend eros, pulvinar tempus neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquam, ante eu blandit consequat, ante ex volutpat nibh, et consectetur leo odio non orci. Phasellus fringilla ex metus, quis varius nibh pretium in.

  Pellentesque sapien lectus, varius a congue in, lobortis condimentum augue. Duis a maximus augue, a dictum ligula. Nullam pulvinar tortor ut dui condimentum, ac venenatis arcu consectetur. Integer gravida erat nibh. Duis molestie suscipit porttitor. In ac odio pulvinar, viverra quam a, dignissim nisi. Integer commodo tempus mauris at finibus. Fusce pretium luctus metus. Nam varius facilisis feugiat. Nam ut suscipit tellus. Praesent vel faucibus lacus, hendrerit pulvinar lectus. Donec velit odio, suscipit ac dui vitae, sagittis dictum purus.

  Sed dictum, nulla non imperdiet facilisis, quam augue scelerisque augue, id maximus velit odio vel velit. Praesent ullamcorper ullamcorper tortor, eget posuere orci euismod nec. Duis at est venenatis, ultrices augue consequat, tristique nisl. Mauris in velit mattis, tincidunt ipsum in, dignissim metus. Integer in risus rhoncus, varius lorem et, convallis nisl. Nullam faucibus vulputate egestas. Quisque et venenatis eros. Curabitur gravida urna quis tortor mattis, id blandit odio imperdiet. Nunc eu massa felis. Cras venenatis consequat elit in lacinia. Fusce ornare faucibus augue sollicitudin posuere. Nullam eu tortor nec neque convallis varius.</div>
      <div id="c">C</div>
      <div id="d">D</div>
    </div>
  </main>
</div>

I don't really see the difference with my code (I'm creating this post because I don't have enough reputation to comment on his solution).

A TLDR from the other post is:

overflow: scroll only works with a fixed size.

Thank you!

Zokalyx · Accepted Answer · 2022-12-24 00:32:26Z

0

I think I've found the issue: 1fr 1fr is not the same as 50% 50%, for example. Using fr is not a "fixed length", after all, and will adjust to box margin and border (and overflowing content!).

Leaving the question as open for now because I'm not sure if I'm posting totally accurate information - at least I solved my problem.

I will say it is a bittersweet solution, since I originally wanted to use fr for its seamless handling of pixel-wide borders and such. Maybe someone has a practical solution to this issue.

answered Dec 24, 2022 at 0:32

Zokalyx

275 bronze badges

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

Collectives™ on Stack Overflow

overflow scroll breaks in nested grid (2)

Snippets:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Snippets:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related