Chrome не расширяет флекс родительский по содержанию детей

Мне нужно отобразить несколько полей рядом друг с другом. Каждое поле имеет переменное количество дочерних элементов. Родитель должен расширяться в соответствии с пространством, которое занимают дочерние элементы. Важно, чтобы элементы имели фиксированную ширину. Я использую 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>

Источник

3 ответа

Решение

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

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

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

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

Простой обходной путь заключается в использовании width вместо flex-basis,

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

пересмотренный демо

ОБНОВИТЬ

Сообщение об ошибке

Flex-base игнорируется при определении размера вложенных flex-контейнеров.

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

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

Источник

Попробуйте добавить 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>

Источник

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

Используйте box-sizing: 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>
Источник
Другие вопросы по тегам