Firefox - 不要なxスクロールバー

Question

不要なxスクロールバーがFirefoxに表示されます。
overflow-x: hidden;で無効にしても、幅が間違っています（文字列は非表示のままです）。

.wrapper { 
    position: absolute; 
} 
.left { 
    height: 150px; 
    display: inline-block; 
    position: relative; 
    overflow: auto; 
} 
.left > div { 
    white-space: nowrap; 
    padding-left: 20px; 
} 

クローム：

のFirefox：

任意の提案なぜですか？コードと遊ぶのが

jsfiddle：https://jsfiddle.net/5yqkoujm/

Answer 1

は、このコードを試してみてください。

.wrapper { 
    position: absolute; 
} 
.left { 
    max-height: 250px; 
    display: inline-block; 
    position: relative; 
    min-width: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-right: 20px; //this fixes scrollbar covering content 
} 
.left > div { 
    white-space: nowrap; 
    padding-left: 20px; 
} 

EDIT：Mozillaブラウザの場合：

だから、

.wrapper { 
    position: absolute; 
} 
.left { 
    height: 150px; 
    display: inline-block; 
    position: relative; 
    min-width: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 
@-moz-document url-prefix() { 
.left { 
    height: 150px; 
    display: inline-block; 
    position: relative; 
    min-width: auto; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-right: 20px; //this fixes scrollbar covering content 
} 
} 
.left > div { 
    white-space: nowrap; 
    padding-left: 20px; 
} 

Answer 2

、ここに私の推測です：あなたは固定が必要高さとダイナミックな幅は、左にあるものに合わせて調整しますdiv。

display:block（デフォルトではdiv）の要素は、デフォルトで100％幅です。 display: inlineまたはinline-block要素がコンテンツに適合します。 https://stackoverflow.com/a/9896303/8932080

あなたはこのEDITEDコードを試してみてください：

別の編集：表示する十分なアイテムが存在しない場合は、今スクロールバーが非表示になります。最後になりましたが、編集、あなたが求めてきたもの:)

.wrapper { 
 
    position: absolute; 
 
} 
 

 
.left { 
 
    height: 150px; 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow-y: auto; 
 
} 
 

 
.left>div { 
 
    white-space: nowrap; 
 
    display: block; /*Nailed it, here is the fix !*/ 
 
    padding-right: 20px; 
 
}

<div class="wrapper"> 
 
    <div class="left"> 
 
    <div>Some not so long string</div> 
 
    <div>Some not so long string</div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="left"> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so long stringSome not so not stringSome not so not tringSome not sog stringSome not so long string</div> 
 
     <div>Some not so long</div> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so</div> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so long string</div> 
 
     <div>Some not so long string</div> 
 
    </div> 
 
    </div>

が、それは:)

---

修正は、このスレッドのおかげで見つけ役立つことを願っていました：parent div scaling to content inside it