Почему flex-элемент игнорирует ширину flex-контейнера и выходит за его пределы?

Question

[Camaro67]

Здравствуйте! Суть вопроса собственно в заголовке. Вот варианты примера, в последнем варианте случайно наткнулся на решение, но дошел до него самостоятельно, методом тыка. Поэтому не знаю на сколько оно верное и стоит ли так делать...
В общем нужна помощь, заранее спасибо!

Answer 1

[Camaro67]

Нашел более-адекватное решение: flex-элементу просто нужно задать overflow: hidden;.

UPD: Еще один вариант вместо overflow: hidden; можно задать min-width: 0;.

Comments

[IvanIF]

Спасибо тебе, дружище! Твой ответ не решил мою задачу напрямую, но натолкнул на решение! Очень выручил!

Answer 2

[Andrej Sharapov]

уберите white-space: nowrap; и все влезет

Comments

[Camaro67]

Текст должен быть в одну строку!

[Andrej Sharapov]

Camaro67, тогда меняйте ширину контейнеров. 300 мало для вашего текста.

[Camaro67]

Andrej Sharapov, Извините конечно, но вы когда макет на верстку получаете всегда такую отсебятину начинаете пороть? Например, в макете блок задан в 300px и не вмещающийся текст должен обрезаться, но вы не знаете как это сделать, и вместо поиска решения просто берете и увеличиваете блок?

[Иван Доброславин]

Camaro67, иногда клиенту просто пофигу )

Answer 3

[AHMETSHIN]

Скорее всего флексбоксу заданы падинги. И надо добавить:

-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;