親は、私は次のCSSを持つ親コンテナを持って

Question

その内容の幅を取ることはありません。

.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で動作します。

しかし、古いブラウザをサポートする必要があるため、インラインブロックで実現したいと考えています。

Answer 1

左の子フロートを削除します。これはfloat：noneを持つ必要があります。また、子供の表示は、インラインブロックでなければなりません。

https://jsfiddle.net/fxm3kpj7/

.optionContainer{ 
    display: inline-block; 
} 

Answer 2

私はheightとoverflow-x: visible固定親display: block、定義されたmin-widthを与えることをしようとするだろう。