Css 创建时防止将元素放置在新行上，但允许x滚动元素容器

我正在开发一个应用程序，你可以用文本框创建许多列。这些列由用户创建，并包装在“列容器”中

问题是当创建一个新的容器时，容器上没有足够的空间来显示它被放置在新行上。我想用X-overfow创建多个这样的列，这样我就可以水平滚动，而不是得到无限的新行

我在包装器CSS上尝试过：

overflow-x：滚动

这是每列的CSS：

  height: calc(100% - 10%); 
  height: -moz-calc(100% - 10%);
  height: -webkit-calc(100% - 10%);
  float: left;
  overflow:hidden;
  overflow-y:scroll;

如果您想使用float，这将很困难。但是，如果您可以将元素更改为
内联块
，那么就相当容易了。根据您的问题，我认为这不会破坏您的布局（并且您可以保持每列的大小）。然后只需将
空白：nowrap
添加到容器中。像这样：


.container{溢出：自动；空白：nowrap；}
.货柜组{
宽度：140px；
高度：100px；
背景色：红色；
右边距：10px；
边缘底部：10px；
显示：内联块；
}

使用flex记录的任何原因？对于flex家长来说，这听起来是一个完美的工作。@AmauryHanser，因为我不想调整列的大小以适应需要。我想保持相同的大小，我只是不想在一个子（或更多）不适合的情况下在包装中添加scroll-x。您只需添加：
flex-shrink:0并且它们不会收缩。您还可以在子对象上结合使用
display:inline block
，在父对象上结合使用
whitespace:nowrap
。有很多解决方案，我只是不明白为什么你想要浮动你的元素，而它不是浮动的目的。