Flexbox item overlaps next row item

Question

My attempt to build a gallery with two big blocks between the small blocks doesn't work. The large block overlaps the two blocks below.

Is it possible to prevent overlapping of blocks with CSS? I couldn't find similar code examples or problems at stack overflow.

.gallery-grid {
  margin: 0 auto;
  padding: 30px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.gallery-grid .image-responsive {
  width: 100%;
}
.gallery-grid .cell {
  margin: 10px 10px;
  width: 110px;
  height: 110px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.gallery-grid .cell.big {
  flex: 0 240px;
}

<div class="gallery-grid">
    <div class="row"></div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell big">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
</div>

The two red marked blocks should not be overlapped.

If you expect the 2 items immediately beneath to be pushed to the right (or down), that won't work with Flexbox, unless you add a script. — Asons, Feb 09 '18 at 10:11

score 0 · Answer 1 · answered Feb 09 '18 at 10:27

.gallery-grid {
  margin: 0 auto;
  padding: 30px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.gallery-grid .image-responsive {
  width: 100%;
}
.gallery-grid .cell {
  margin: 10px 10px;
  width: 110px;
  height: 110px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}
.gallery-grid .cell.big {
  flex: 0 240px;
}

<div class="gallery-grid">
    <div class="row"></div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell big">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
</div>

Flexbox item overlaps next row item

1 Answers1