Question 223097 in CSS Question posted in
Some basic documentation can be found here.

CSS Grid blow out vertically, instead of overflow-y kicking in

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>
Tags:

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search