1

In the below snippet, why is there grid blow out? The grid has a lime green border, each child has a dotted red border, and you can see the dotted red expands beyound the lime grid border. .child2 should become scrollable so that the grid does not blowout.

With regards to a solution: I can't fix height of the .grid-children, as the number of rows is sometimes 5 or 6. And the rows arent always the same size. The first row is taller than the others.

PS There is no grid gap or margin on the .grid-children (which is the solution to other answers).

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100px;
  border: solid lime 2px;
}

.grid-child {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: dashed red 1px;
}

.child2 {
  flex-grow: 1;
  overflow-y: auto;
}
<div class="grid">
  <div class="grid-child">
    <div class="child1">
      child 1
    </div>
    <div class="child2">
      <div>foo1</div>
      <div>foo2</div>
      <div>foo3</div>
      <div>foo4</div>
      <div>foo5</div>
      <div>foo6</div>
    </div>
  </div>
  <div class="grid-child">another grid child B</div>
  <div class="grid-child">another grid child C</div>
  <div class="grid-child">another grid child D</div>
</div>
run_the_race
  • 1,344
  • 2
  • 36
  • 62

2 Answers2

1

As you have used 100px height for .grid so your .grid-child should follow parent's height.

.grid-child this should be min-height: 100% instead of height: 100%

Try to replace it with the below code:

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100px;
  border: solid lime 2px;
}

.grid-child {
  display: flex;
  flex-direction: column;
  /*height: 100%;*/
  min-height: 100%;
  border: dashed red 1px;
}

.child2 {
  flex-grow: 1;
  overflow-y: auto;
}
<div class="grid">
  <div class="grid-child">
    <div class="child1">
      child 1
    </div>
    <div class="child2">
      <div>foo1</div>
      <div>foo2</div>
      <div>foo3</div>
      <div>foo4</div>
      <div>foo5</div>
      <div>foo6</div>
    </div>
  </div>
  <div class="grid-child">another grid child B</div>
  <div class="grid-child">another grid child C</div>
  <div class="grid-child">another grid child D</div>
</div>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
user3302090
  • 177
  • 3
  • Could you explain why min-height works and height does not? This is really puzzling me – Zach Jensz Aug 04 '23 at 13:14
  • @Zach Jensz as Temani explains in his comment to my question, its because when you use flex or grid, the children have implicitly a min-width: auto; and min-height:auto set. This means they won't shrink down below its normal size, unless one overrides the min width/height. – run_the_race Aug 12 '23 at 06:59
  • @run_the_race Yea I found that out in the answer Temani linked. Thank you – Zach Jensz Aug 13 '23 at 01:57
0

overflow-y: hidden on the grid children seems to work:

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 100px;
  border: solid lime 2px;
}

.grid-child {
  display: flex;
  flex-flow: column;
  overflow-y: hidden;
  border: dashed red 1px;
}

.child2 {
  flex-grow: 1;
  overflow-y: auto;
}
<div class="grid">
  <div class="grid-child">
    <div class="child1">
      child 1
    </div>
    <div class="child2">
      <div>foo1</div>
      <div>foo2</div>
      <div>foo3</div>
      <div>foo4</div>
      <div>foo5</div>
      <div>foo6</div>
    </div>
  </div>
  <div class="grid-child">another grid child B</div>
  <div class="grid-child">another grid child C</div>
  <div class="grid-child">another grid child D</div>
</div>
Zach Jensz
  • 3,650
  • 5
  • 15
  • 30