Div with CSS Grid not behaving consistently in chrome and firefox

Question

Facing this weird issue where i have a div with overflow scroll. It is behaving differently in firefox and chrome.

It works in chrome but not in firefox, I see empty lines in Firefox.

what is going on here?

https://stackblitz.com/edit/web-platform-rdzpnu?file=styles.css

.continer {
  border: 1px solid #ddd;
  padding: 12px;
  max-height: 500px;
  /** works in chrome **/
  /* height: 500px; doesn't work */
  display: flex;
  flex-direction: column;
}

.logs-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
  overflow-y: scroll;
}

.log {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid gray;
}

<div class="continer">
  <h3> Recent Logs
  </h3>
  <div class="logs-grid">
    <div class="log">Voluptate nihil in quisquam nam eos ea placeat culpa veritatis.
    </div>
    <div class="log">Sit reiciendis non sit iste sequi.</div>
    <div class="log">Omnis consequuntur et voluptatum veniam nam.</div>
    <div class="log">Maxime quia quis laborum.</div>
    <div class="log">Exercitationem enim perferendis hic ut qui tempore debitis omnis ab.</div>
    <div class="log">Ea aut numquam odit officia dolores totam et.</div>
    <div class="log">Quis laudantium a itaque molestiae corporis rerum sequi sed perspiciatis.</div>
    <div class="log">Aut ducimus expedita qui.</div>
    <div class="log">Sed eum inventore ex animi ut laudantium non unde.
    </div>
    <div class="log">Dignissimos facilis expedita distinctio eaque laudantium aliquam harum sit.</div>
    <div class="log">Necessitatibus ab aliquid ab asperiores suscipit voluptas illum qui.</div>
    <div class="log">Ut magni earum ut suscipit ipsa recusandae deserunt eius nihil.
    </div>
    <div class="log">Reiciendis minima ipsam occaecati.</div>
    <div class="log">Quo mollitia laboriosam est ullam sequi.</div>
    <div class="log">Saepe quos soluta praesentium placeat laudantium consequatur possimus autem modi.</div>
    <div class="log">Non non ducimus fuga dolores soluta amet quaerat.</div>
    <div class="log">Consequatur reiciendis nemo voluptatum aut ut.</div>
    <div class="log">Sint nobis sit et et aut placeat.</div>
    <div class="log">Quis quo libero sit odit.</div>
    <div class="log">Accusantium in fugiat quia veniam dicta perspiciatis.
    </div>
    <div class="log">Unde nostrum quo ea iste consequatur et non reiciendis.
    </div>
    <div class="log">Expedita exercitationem fuga sint harum culpa asperiores sed officia.</div>
    <div class="log">Sed voluptatem nostrum itaque harum iusto qui enim nam.
    </div>
    <div class="log">Consectetur vero ut ut aspernatur eos ea nesciunt.
    </div>
    <div class="log">Qui vero repellendus aut dolor quas voluptatem dolore.
    </div>
    <div class="log">Aut odit voluptatem fugiat error cum aut ea tempora sint.
    </div>
    <div class="log">Aperiam unde et molestias.</div>
    <div class="log">Quasi vel ex facilis dolor sequi repudiandae quas explicabo.
    </div>
    <div class="log">Non ut sit autem sunt quia.</div>
    <div class="log">Fugit veritatis in.</div>
    <div class="log">Suscipit sequi et amet inventore vel et porro.</div>
    <div class="log">Totam esse voluptatem qui.</div>
    <div class="log">Aut hic suscipit.</div>
    <div class="log">Quas molestias illum similique non ratione distinctio exercitationem nemo accusamus.</div>
    <div class="log">Quia velit eos aut eveniet.</div>
    <div class="log">Eum rem nostrum est.</div>
    <div class="log">Aliquid ut molestiae totam aut.</div>
    <div class="log">Maxime inventore sit nostrum voluptatibus quia quas explicabo.
    </div>
    <div class="log">Quos sed aut odio fugit delectus culpa aut.</div>
    <div class="log">Voluptatem quod autem qui repellendus quia voluptate.
    </div>
    <div class="log">Aut vero dolores vero.</div>
    <div class="log">Qui alias velit dolor minima perspiciatis enim facilis officiis aut.</div>
  </div>
</div>

Answer 1

This looks like a bug in Firefox with nesting an overflowing grid container inside a flex container.

(By the way, nesting a column-direction flex container has the same problem.)

I would suggest you use standard block layout (display: block) for the nested div. It seems to work fine across browsers.

.continer {
  border: 1px solid #ddd;
  padding: 12px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
}

.logs-grid {
  flex: 1;
  overflow-y: scroll;
}

.log {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px solid gray;
  margin-bottom: 10px;
}

<div class="continer">
  <h3> Recent Logs
  </h3>
  <div class="logs-grid">
    <div class="log">Voluptate nihil in quisquam nam eos ea placeat culpa veritatis.
    </div>
    <div class="log">Sit reiciendis non sit iste sequi.</div>
    <div class="log">Omnis consequuntur et voluptatum veniam nam.</div>
    <div class="log">Maxime quia quis laborum.</div>
    <div class="log">Exercitationem enim perferendis hic ut qui tempore debitis omnis ab.</div>
    <div class="log">Ea aut numquam odit officia dolores totam et.</div>
    <div class="log">Quis laudantium a itaque molestiae corporis rerum sequi sed perspiciatis.</div>
    <div class="log">Aut ducimus expedita qui.</div>
    <div class="log">Sed eum inventore ex animi ut laudantium non unde.
    </div>
    <div class="log">Dignissimos facilis expedita distinctio eaque laudantium aliquam harum sit.</div>
    <div class="log">Necessitatibus ab aliquid ab asperiores suscipit voluptas illum qui.</div>
    <div class="log">Ut magni earum ut suscipit ipsa recusandae deserunt eius nihil.
    </div>
    <div class="log">Reiciendis minima ipsam occaecati.</div>
    <div class="log">Quo mollitia laboriosam est ullam sequi.</div>
    <div class="log">Saepe quos soluta praesentium placeat laudantium consequatur possimus autem modi.</div>
    <div class="log">Non non ducimus fuga dolores soluta amet quaerat.</div>
    <div class="log">Consequatur reiciendis nemo voluptatum aut ut.</div>
    <div class="log">Sint nobis sit et et aut placeat.</div>
    <div class="log">Quis quo libero sit odit.</div>
    <div class="log">Accusantium in fugiat quia veniam dicta perspiciatis.
    </div>
    <div class="log">Unde nostrum quo ea iste consequatur et non reiciendis.
    </div>
    <div class="log">Expedita exercitationem fuga sint harum culpa asperiores sed officia.</div>
    <div class="log">Sed voluptatem nostrum itaque harum iusto qui enim nam.
    </div>
    <div class="log">Consectetur vero ut ut aspernatur eos ea nesciunt.
    </div>
    <div class="log">Qui vero repellendus aut dolor quas voluptatem dolore.
    </div>
    <div class="log">Aut odit voluptatem fugiat error cum aut ea tempora sint.
    </div>
    <div class="log">Aperiam unde et molestias.</div>
    <div class="log">Quasi vel ex facilis dolor sequi repudiandae quas explicabo.
    </div>
    <div class="log">Non ut sit autem sunt quia.</div>
    <div class="log">Fugit veritatis in.</div>
    <div class="log">Suscipit sequi et amet inventore vel et porro.</div>
    <div class="log">Totam esse voluptatem qui.</div>
    <div class="log">Aut hic suscipit.</div>
    <div class="log">Quas molestias illum similique non ratione distinctio exercitationem nemo accusamus.</div>
    <div class="log">Quia velit eos aut eveniet.</div>
    <div class="log">Eum rem nostrum est.</div>
    <div class="log">Aliquid ut molestiae totam aut.</div>
    <div class="log">Maxime inventore sit nostrum voluptatibus quia quas explicabo.
    </div>
    <div class="log">Quos sed aut odio fugit delectus culpa aut.</div>
    <div class="log">Voluptatem quod autem qui repellendus quia voluptate.
    </div>
    <div class="log">Aut vero dolores vero.</div>
    <div class="log">Qui alias velit dolor minima perspiciatis enim facilis officiis aut.</div>
  </div>
</div>

Answer 2

It seems like your .log elements have no height on firefox because of the overflow-x: hidden; on it.

You can give them a height, or make your grid cells heigh enough:

.logs-grid {
  grid-auto-rows: max-content;
}