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;
}