Ширина Flexbox не одинакова во всех браузерах - PullRequest
Новая
       10

Ширина Flexbox не одинакова во всех браузерах

0 голосов
/ 23 октября 2019

Мне нужен контейнер с максимальной шириной 85% для центрирования, в то время как гибкая сетка оборачивает элемент.

Если гибкая сетка меньше максимальной ширины, контейнер адаптирует вычисленную ширину содержимого, а не просто использует 85% контейнера (используя значение "max-content").

Пример содержимого: 

body {
  width: 100%;
}

.centered {
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
}

.container {
  width: max-content;
  max-width: 50%;
  background: red;
}

.grids {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.box {
  margin: 8px;
  width: 128px;
  height: 128px;
  max-width: 128px;
  background: green;
  flex: 1 0 auto;
}
<div class="centered">
  <div class="container">
    <div class="grids">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</div>

Вот репродукция в codepen . Это работает правильно на Chrome и Safari , но не работает на Firefox .

...