CSS grid preventing grandchild's overflow scrollbar

Question

I came across a weird situation when combining css grid and overflow auto.

When I have 3 elements, the outer element has display: grid, the middle element has height: 100% and the inner most element has height: 100% and overflow: auto. If the inner element doesn't overflow than the 100% height is maintained perfectly, but when the inner most element does overflow the auto (i.e. scrollbar) doesn't kick in but instead it behaves like overflow: visible.

Example 1) Outer container without grid and inner overflows: works perfectly.

Example 2) Outer container with grid and inner overflows: Not working (no scrollbar).

Example 3) Outer container with grid and inner doesn't overflow: works perfectly.

body {
  /* the body styles are not necessary to demonstrate the problem */
  display: flex;
  column-gap: 10px;
}
.outer {
  grid-template-rows: 1fr;
  height: 100px;
  background-color: #0000ff77;
  padding: 20px;
}
.outer.grid {
  display: grid;
}
.middle {
  height: 100%;
}
.inner {
  background-color: #ff000077;
  overflow: auto;
  height: 100%;
  width: 100px;
  box-sizing: border-box;
}

<div class="outer">
    <div class="middle">
      <div class="inner">
          Some<br>placeholder<br>text<br>goes<br>here<br>...<br>...<br>...<br>...<br>
     </div>
  </div>
</div>


<div class="outer grid">
    <div class="middle">
      <div class="inner">
          Some<br>placeholder<br>text<br>goes<br>here<br>...<br>...<br>...<br>...<br>
     </div>
  </div>
</div>


<div class="outer grid">
    <div class="middle">
      <div class="inner">
          Very<br>little<br>text
     </div>
  </div>
</div>

Interestingly enough, this problem only happens when there is a middle element between the grid and the overflowing elements.

I'm not sure if I'm just missing something basic about CSS grid or I've hit a weird corner case here, any help appreciated.

Your layout is too complicated. You have both grid and flex. What exactly you'd like to achieve? If you need to have 3 columns with scrolling text inside, it could be done much easier. — Azu, Sep 10 '21 at 17:38
I've updated the code example. @Aze I'm not trying to get a 3 column layout, I'm just using 3 columns to demonstrate how this problem only happens in one of the 3 situations, what I want is a grid element that has a grandchild that gets a scrollbar when overflowing, is this clearer for you? — Mendy, Sep 10 '21 at 17:52
Still not clear:) Maybe instead of describing the problem, try to describe what would you like to have working. Are you allowed to edit the CSS? I'll try to help you by only changing the CSS without any HTML changes. Is that okay? — Azu, Sep 10 '21 at 17:59
I found out something. .outer.grid { display: grid; } If you remove this 'display: grid', the text in all boxes scrolls okay. Was that the problem? — Azu, Sep 10 '21 at 18:03
@Azu this is exactly the problem I was trying to demonstrate, that the scrollbar is not working when the element has a grid ancestor — Mendy, Sep 10 '21 at 18:17
you need min-height: 0; applied to the middle item when using the grid — Temani Afif, Sep 10 '21 at 19:59
@TemaniAfif yes! This works! But why, why would min-height make a difference here? — Mendy, Sep 12 '21 at 16:21
I see now, the answer can be found in the [associated question](https://stackoverflow.com/q/43311943/5253155). Another solution would be to change `1fr` to `minmax(0, 1fr)` — Mendy, Sep 12 '21 at 17:30

score 0 · Answer 1 · answered Sep 10 '21 at 18:35

0

Try with this:

.middle {
    height: 100%;
    overflow-y: auto;
}
.inner {
    background-color: #ff000077;
    width: 100px;
    box-sizing: border-box;
}

In that what you need?

answered Sep 10 '21 at 18:35

Azu

1,494
2
6
11

CSS grid preventing grandchild's overflow scrollbar

1 Answers1