ブラウザの幅を変更したときに水平スクロールバーが機能しない？

Question

divを持っていて、画像が入っているdivがあります。すべての画像が表示されますが、ブラウザの幅が画像のスタッキングよりも自動的な水平スクロールバーのサイズが変更された（小さい）下に私はこれを作成しようとしているが動作していない。どんな助け？

<div style="height:80px;width:auto;border:1px solid red;white-space:nowrap;overflow-y:hidden;-ms-overflow-y:hidden;overflow-x:scroll;-ms-overflow-x:scroll;"> 
    <div style="height:60px;width:90px;display:inline-block;"> 
    <a href="#" > 
     <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png" /> 
    </a> 
    </div> 
    <div style="height:60px;width:90px;display:inline-block;"> 
    <a href="#" > 
     <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png" /> 
    </a> 
    </div> 
    <div style="height:60px;width:90px;display:inline-block;"> 
    <a href="#" > 
     <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png" /> 
    </a> 
    </div> 
    <div style="height:60px;width:90px;display:inline-block;"> 
    <a href="#" > 
     <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png" /> 
    </a> 
    </div> 
    <div style="height:60px;width:90px;display:inline-block;"> 
    <a href="#" > 
     <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png" /> 
    </a> 
    </div> 
</div> 

Answer 1

Firefoxでは動作しませんでした。 Firefoxでは、 'fieldset'タグスタイルを 'display：table-column;'に設定する必要がありました。私のメインのdivは、 'container'（Bootstrap）のクラスを持つ別のdivにあるタグの中にあったので、fieldsetはコンテナの幅をとっていました。

Answer 2

コードが期待通りに機能しているようです。 https://fiddle.jshell.net/ph110293/goetup62/