html - 带有 CSS Grid 的 Div 在 chrome 和 firefox 中表现不一致

Question

面对这个奇怪的问题，我有一个带有溢出滚动的 div。它在 Firefox 和 Chrome 中的行为不同。

它在 chrome 中有效，但在 firefox 中无效，我在 Firefox 中看到空行。

这是怎么回事？

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

这看起来像是 Firefox 中的一个错误，在 flex 容器中嵌套了一个溢出的网格容器。

(顺带一提，嵌套一个column-direction flex容器也有同样的问题。)

我建议您对嵌套的 div 使用标准 block 布局 (display: block)。它似乎可以跨浏览器正常工作。

.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>