Chrome не расширяет flex parent в соответствии с содержимым детей

Мне нужно отобразить несколько полей рядом друг с другом. Каждое поле имеет переменное количество дочерних элементов. Родитель должен расширяться в соответствии с пространством, которое занимают дочерние элементы. Важно, чтобы элементы имели фиксированную ширину. Я использую flexbox для макета. Он должен выглядеть следующим образом:

Я написал Plunkr, чтобы проиллюстрировать.

Проблема: Chrome не расширяет родительский элемент, когда дети занимают больше места. Детские элементы отображаются за пределами границ родителей и отображаются в соседнем родителе, в результате чего этот беспорядок:

По иронии судьбы, если вы открываете Plunkr в IE 11 или Edge, он отлично работает.

Что я делаю неправильно?

Здесь фрагмент кода:

body {
  display: flex;
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.items {
  display: flex;
}

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

<div class="parent">
  <h4>Parent 1</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 2</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 3</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 4</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 5</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 6</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>

Ответ 1

Это похоже на ошибку в Chrome.

В этом разделе кода:

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

... Chrome не соблюдает фиксированную ширину 25 пикселей. Или, по крайней мере, контейнер не распознает пространство. Похоже, что размер контейнера измеряется до того, как будут учтены все вычисления элементов.

Простым решением является использование width вместо flex-basis.

.items span {
    flex-shrink: 0;
    width: 25px;
 }

измененная демо

UPDATE

Отчет об ошибках

Flex-basis игнорируется при настройке вложенных гибких контейнеров.

"Да, это сотрясающее следствие ошибки, которую мы имеем, возможно, в сочетании с неудачным следствием..."

"Когда внешний flexbox находит желаемый размер внутреннего flexbox, он запрашивает его максимальный размер содержимого (см. LayoutFlexibleBox:: computeInnerFlexBaseSizeForChild). Но здесь, где возникает ошибка, максимальный размер содержимого не учитывает flex-basis только свойства ширины/фактический контент. Поэтому добавление явной ширины фиксирует ошибку."

Ответ 2

Пожалуйста, проверьте это

Использование box-size: border-box; для родительского элемента и ширины, чтобы поддерживать ширину каждого элемента

https://plnkr.co/edit/3p8PwmLtHYozEFveRvTX

/* Styles go here */

body {
  display: flex;
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  box-sizing : border-box;
}

.items {
  display: flex;
}

.items span {
  width: 25px;
}

HTML:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="parent">
    <h4>Parent 1</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 2</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 3</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 4</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 5</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
  <div class="parent">
    <h4>Parent 6</h4>
    <div class="items">
      <span>i1</span>
      <span>i2</span>
      <span>i3</span>
      <span>i4</span>
      <span>i5</span>
    </div>
  </div>
</body>

</html>

Ответ 3

Попробуйте добавить inline-flex вместо flex, также прокомментируйте некоторые нежелательные стили для гибких дисков, пожалуйста, обратитесь сюда,

/* Styles go here */
body {
  /* display: flex; */
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: inline-flex;
  flex-direction: column;
}

.items {
  /* display: flex; */
}

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

<div class="parent">
  <h4>Parent 1</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 2</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 3</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 4</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 5</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>