Сгибаемая сетка неправильно отображается в Safari - нет высоты для гибких элементов - PullRequest
Новая
       29

Сгибаемая сетка неправильно отображается в Safari - нет высоты для гибких элементов

1 голос
/ 18 июня 2019

Вот простая таблица HTML, работающая как в Chrome, так и в Safari: 

.container {
  height: 100vh;
  overflow-y: hidden;
  background-color: black;
  color: white;
}

.rows-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: blue;
}

.row-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  border: 1px solid cyan;
}
<div class="container">
  <h1>TEST</h1>
  <div class="rows-container">
    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>
    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>
    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>
  </div>
</div>

В Chrome все выглядит хорошо, строки отображаются правильно.

Но в Safari строки не получают правильную высоту, что приводит к переопределениюодин над другим (см. рис ниже).Safari bug

Это простое гибкое использование, поэтому я скучаю по нему.

Как правильно исправить код, чтобы он отображалсяправильно на Safari, Chrome и IE (Edge)?

Я использую Safari 12.1.1 на MacOS Mojave.

1 Ответ

2 голосов
/ 18 июня 2019

Safari отображает flex-shrink иначе, чем другие браузеры.

Просто отключите его на элементах строки.

Добавьте это к своему коду: 

.row-container {
  flex-shrink: 0;
}

jsFiddle demo 

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: black;
  color: white;
}

.rows-container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: blue;
}

.row-container {
  flex-shrink: 0; /* new */
  display: flex;
  border: 1px solid cyan;
}

h1 {
  margin: 0;
}

body {
  margin: 0;
}
<div class="container">
  <h1>TEST</h1>
  <div class="rows-container">
    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>
    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>
    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>

    <div class="row-container">
      <div>One</div>
      <div>Two</div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...