спас мою жизнь

веденном ниже примере я хочу предотвратить переполнение родительского элемента в растянутом дочернем элементе. Я не хочу указывать ширину для него. Как я могу это сделать?

#flex-parent { display: flex; width: 200px; background: green; padding: 10px; }
#fixed-child { width: 20; background: red }
#stretched-child { background: yellow; word-wrap: break-word }
<div id="flex-parent">
  <div id="fixed-child">
FIXED
  </div>
  <div id="stretched-child">
  STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED
  </div>
</div>

Ответы на вопрос(1)

Решение Вопроса

алгоритм минимальной ширины, гдеmin-width гибкого элемента по умолчаниюauto и как таковой не позволяет ему сжиматься ниже своего содержания.

Вы можете использоватьword-break: break-all

#flex-parent {
  display: flex;
  width: 200px;
  background: green;
  padding: 10px;
}

#fixed-child {
  width: 20;
  background: red
}

#stretched-child {
  background: yellow;
  word-wrap: break-word;
  word-break: break-all;
}
<div id="flex-parent">
  <div id="fixed-child">
    FIXED
  </div>
  <div id="stretched-child">
    STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED
  </div>
</div>

Или жеmin-width: 0 чтобы позволить ему быть меньше, чем его содержание

#flex-parent {
  display: flex;
  width: 200px;
  background: green;
  padding: 10px;
}

#fixed-child {
  width: 20;
  background: red
}

#stretched-child {
  background: yellow;
  word-wrap: break-word;
  min-width: 0;
}
<div id="flex-parent">
  <div id="fixed-child">
    FIXED
  </div>
  <div id="stretched-child">
    STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED
  </div>
</div>

После быстрого кросс-браузерного тестирования (Chrome / Firefox / Edge / IE в Windows 10) кажется, что IE нужно либоword-break: break-all или жеoverflow hidden

 Hinrich13 апр. 2018 г., 14:20
min-width: 0 спас мою жизнь

Ваш ответ на вопрос