带有inline-css的父级不会占用其内容的宽度

Question

我有一个包含以下css的父容器：

.options {
  background-color: white;
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
  color: black;
  display: inline-block !important;
  margin-top: 100px;
  left: 50%;
  overflow: auto;
  position: absolute;
  top: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

它的孩子有：

.optionContainer{
  display: block;
  float: left;
}

我试图实现的是将孩子一个接一个地对齐，而将父母扩展到他们的总宽度，孩子的数量不固定。这适用于flexbox。

但我想用inline-block实现它，因为我必须支持旧的浏览器。

Answer 1

移除子浮子。它应该有float：none。此外，孩子的显示应该是：内联块。

https://jsfiddle.net/fxm3kpj7/

.optionContainer{
    display: inline-block;
 }

Answer 2

我会尝试为父display: block，定义的min-width，固定height和overflow-x: visible提供。