Encountered an unusual issue while using a combination of CSS grid and overflow auto.
In the scenario where there are 3 elements, the outermost element has display: grid, the middle element has height: 100%, and the innermost element has both height: 100% and overflow: auto. When the inner element does not overflow, the 100% height is maintained perfectly. However, if the innermost element overflows, the scrollbar does not appear and it behaves as though overflow: visible.
Example 1) Outer container without grid and inner overflowing: functions correctly.
Example 2) Outer container with grid and inner overflowing: Scrollbar doesn't show up.
Example 3) Outer container with grid and inner not overflowing: works perfectly.
body {
/* Styles for body not required to showcase the issue */
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>This issue occurs only when there is a middle element positioned between the grid and the overflowing elements.
Unclear if this is a fundamental oversight in CSS grid or a peculiar edge case, any assistance would be greatly appreciated.