Why grid overflows the parent grid when it contains an overflowing item?

Asked Dec 22 '19 at 11:40

Active Dec 22 '19 at 11:40

Viewed 23 times

When wide item is positioned within a grid (red, in the picture below), the grid preserves its width.

However, when there is another grid in the game (blue, in the picture below), it overflows the parent grid, and adding width: 100% to it doesn't seem to help.

Why is this happening?

How would you ensure that the blue grid doesn't overflow the red container?

.container {
  width: 200px;
  border: 4px solid black;
}

.grid1 {
  display: grid;
  border: 10px solid red;
  margin-bottom: 40px;
}

.grid2 {
  display: grid;
  border: 10px solid blue;
}

.item {
  width: 300px;
  background-color: #ccc;
}

<div class="container">
  <div class="grid1">
    <div class="item">Item</div>
  </div>
  <div class="grid1">
    <div class="grid2">
      <div class="item">Item</div>
    </div>
  </div>
</div>

asked Dec 22 '19 at 11:40

Misha Moroshko

166,356
226
505
746

you want the blue one to be like the red one ? – Renaldo Balaj Dec 22 '19 at 11:48
or just have both of them inside the .container – Renaldo Balaj Dec 22 '19 at 11:49
1

`min-width: 0;` to the blue item – Temani Afif Dec 22 '19 at 11:50
1

Because, by default, a grid item cannot be shorter than its content. As @TemaniAfif has just noted, override the `min-width: auto` default. https://jsfiddle.net/z3bf2whp/ – Michael Benjamin Dec 22 '19 at 11:52

Why grid overflows the parent grid when it contains an overflowing item?

0 Answers0