Flexbox влияет на поведение при переполнении - PullRequest
Новая
       5

Flexbox влияет на поведение при переполнении

0 голосов
/ 11 сентября 2018

Посмотрите на этот фрагмент. Вот как должен работать overflow-wrap: break-word: 

.wrap{
   overflow-wrap: break-word;
}
<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal 
  </div>
</div>

А теперь посмотрим, как изменится его поведение в сочетании с display:flex: 

.wrap{
   overflow-wrap: break-word;
   display: flex;
}
<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal 
  </div>
</div>

Как отредактировать второй фрагмент, чтобы не показывать горизонтальную полосу прокрутки? (Без использования переполнения: скрыто)

Спасибо

1 Ответ

0 голосов
/ 11 сентября 2018

Когда вы задаете display: flex для wrap, по умолчанию элементы a и b сгибаются в строке.

Теперь еще одно значение по умолчанию flexbox child - это свойство min-width, по умолчанию равное auto , поэтому элементы a и b принимают min-width, соответствующее его содержимому.Поэтому установите min-width: 0 и все вернется к нормальный - см. Демонстрацию ниже: 

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0; /* ADDED */
}
<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div>
...