Нечетное поведение ширины (авто), когда слова имеют строки с авторазрывом

Question

Рассмотрим следующий пример:

https://jsfiddle.net/3w4fx8vu/

html,
body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  max-width: 500px;
  background: #555;
  color: #fff;
}

.child {
  border: 1px solid #eee;
}

<div class="parent">
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
</div>

Четвертый элемент (с 4 словами) имеет дополнительный пробел справа. Вопрос в том, почему это происходит и как это можно обойти?

Answer 1

это у вас работает? Мы добавили пробел: nowrap и overflow: hidden

Не совсем ясно, что вы хотите, чтобы происходило, когда текст переполняет контейнер;

html,
body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  max-width: 500px;
  background: #555;
  color: #fff;
}

.child {
  border: 1px solid #eee;
  white-space:nowrap;
  overflow:hidden;
}

<div class="parent">
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;      
  background: #555;
  color: #fff;
}

.child {
  border: 1px solid #eee;
  white-space:nowrap;
  overflow:hidden;
}

<div class="parent">
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
</div>

Answer 2

Почему это происходит?

По умолчанию элемент flex имеет

flex-grow:0;
flex-shrink:1;
flex-basis:auto;

flex-grow: 0; Значит, если осталось над пространством внутри контейнера элементы не будут расти.

flex-shrink: 1; Означает, что если внутри контейнера недостаточно места, элементы будут сжиматься, чтобы поместиться внутри

flex-based: auto; Означает, что flex-элемент будет иметь минимальную ширину / высоту, равную содержимому.

При такой настройке содержимое элементов будет размечено First тогда, если осталось над пространством, оно будет распределено равномерно.

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

Существование огромного элемента заставит элементы сокращаться благодаря flex-shrink:1;, и поэтому вы видите, что один элемент имеет больше места, чем другие.

---

Что такое Обойти это?

flex-grow:1;
flex-shrink:0;
flex-basis:0;

flex-gro w: 1; При увеличении до размера элементы равномерно распределяются.

flex-shrink: 0; Никогда не сжимаются

flex-based: 0 ; Разделить доступное пространство сначала , затем сложить содержимое.

html,
body {
  margin: 0;
  padding: 0;
}

.parent {
  display: flex;
  max-width: 500px;
  background: #555;
  color: #fff;
}

.child {
  border: 1px solid #eee;
  flex: 1 0 0;
}

<div class="parent">
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
  <div class="child">text text text</div>
</div>

Answer 3

Вы не указали никакой ширины для контейнера, чтобы заставить их принимать ту же ширину, которую вы можете добавить: flex: 1 1 ;: https://jsfiddle.net/9gf8a7rm/

html, body {margin:0; padding:0;}
.parent {
  display: flex;
  max-width: 500px;
  background: #555;
  color: #fff;
}
.child {
  border: 1px solid #eee;
  flex: 1 1 ;
}

ширина родитель ограничен, поэтому вы не сможете увидеть изменения, если не удалите: width:500px вы также можете заменить его на max-width:fit-content, чтобы он брал только то, что ему нужно, см .: https://jsfiddle.net/9gf8a7rm/1/