встроенный блок не работает вместе с переполнением для div

Question

У меня есть два divs, которые хорошо помещаются на одной строке при использовании display: inline-block, но если один контейнер теперь содержит какое-то очень длинное слово, которое я пытаюсь обернуть с помощью overflow-wrap и word-break, этот контейнер переместится вследующая строка, чего я хочу избежать.

div {
  display: inline-block;
}

div.bar {
  overflow-wrap: break-word;
  word-break: break-all;
}

<div>foo</div>
<div class="bar">
  barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
</div>

Посмотреть на JSFiddle

Что бы я хотел, это

foobarbarbarbarbarbarbarbarbarbarbarbarbarbar...
...barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar

Answer 1

если вы хотите, чтобы оба div-элемента находились в одной строке, попробуйте обернуть их в родительский div с помощью display:flex

Подробнее о модели flexbox здесь

Проверьте здесь:

div {
  display: inline-block;
}

div.bar {
  overflow-wrap: break-word;
  word-break: break-all;
}

div.flex-parent {
  display: flex;
}

<div class="flex-parent">
  <div>foo</div>
  <div class="bar">
    barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
  </div>
</div>

JSFiddle

Answer 2

Вы должны дать divs ширину. inline-block займет столько места, сколько ему нужно, поэтому, если его содержимое занимает всю ширину области просмотра, он действует как display: block.