W obliczu tego dziwnego problemu, gdzie mam div z przewijaniem przelewem. Zachowuje się inaczej w Firefoksie i Chrome.

Działa w Chrome, ale nie w Firefoksie, widzę puste linie w Firefoksie.

Co tu się dzieje?

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>
3
Suresh Nagar 13 marzec 2021, 00:05

2 odpowiedzi

Najlepsza odpowiedź

Wygląda to jak błąd w Firefoksie z gniazdującym przepełnionym pojemnikiem siatki w pojemniku Flex.

(Nawiasem mówiąc, gniazdowanie pojemnika flex w kierunku kolumnowym ma ten sam problem.)

Proponuję użyć standardowego układu bloku (display: block) dla zagnieżdżonego div. Wydaje się, że działa dobrze przez przeglądarek.

.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>
1
Michael Benjamin 13 marzec 2021, 01:23

Wygląda na to, że elementy .log nie mają wysokości na Firefoksie z powodu overflow-x: hidden; na nim.

Można dać im wysokość lub tworzyć komórki siatki wystarczająco wysoko:

.logs-grid {
  grid-auto-rows: max-content;
}
0
Roman Mkrtchian 13 marzec 2021, 01:07