Question

在下面的笔中：https://codepen.io/anon/pen/jeRZee，当您使浏览器变窄以使黄色div不适合时，而不是向下滚动到下一行，id就像黄色的跨度一样保持在原处并且是容器显示水平滚动条，以便您可以向右滚动以查看黄色范围的其余部分。

我无法使用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;

如果超过容器的大小（width: 100%;，则阻止容器的CSS包装内容。

此解决方案接近您当前的实现。另一种可能的方法是对容器也使用flexbox。

停止在div内包裹

1 个答案: