Стоп пролетает обтекание внутри div

Question

В следующем пере: https://codepen.io/anon/pen/jeRZee, когда вы сужаете браузер, чтобы желтый div не помещался, вместо того, чтобы переходить к следующей строке, идентифицируйте как желтый промежуток, чтобы остаться на месте, и это Контейнер для отображения горизонтальной полосы прокрутки, чтобы вы могли прокрутить вправо, чтобы увидеть остаток от желтого диапазона.

Я не могу использовать display: inline-block для синего и желтого диапазонов, поскольку я уже использую display: flex, поскольку мне это нужно для их содержимого.

.container {
  width: 100%;
  height: 120px;
  width: 100%;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow-x: scroll;
}

.item1 {
  width: 500px;
  background-color: blue;
  height: 100%;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.item2 {
  width: 500px;
  background-color: yellow;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div class='container'>
  <span class='item1'>
    I'm using flex here so I can center vertically
  </span>
  <span class='item2'>
    I'm using flex here so I can center vertically
  </span>
</div>

Спасибо.

Answer 1

Если вы хотите объединить flex и inline, просто используйте

display: inline-flex;

для обоих ваших предметов.

Также добавьте

white-space: nowrap;

К CSS вашего контейнера, чтобы предотвратить перенос содержимого, если размер контейнера (превышающий width: 100%;.

)

Это решение близко к вашей текущей реализации. Другой возможный способ - использовать flexbox для вашего контейнера.