CSSネストされたスクロールバーとダイナミックコンテンツが100％の幅で重複しています

Question

以下のコードは、自動的にYスクロールする2つのネストされたdivを示しています。

内側のスクロールバーを表示し、内側のdivを100％の幅に保つCSSソリューションはありますか？

div { 
 
    background: rgba(0, 0, 0, 0.2); 
 
    width: 200px; 
 
    height: 400px; 
 
    overflow-y: auto 
 
} 
 
#outer { height: 400px; } 
 
#inner { height: 200px; } 
 
button { float: right; color: #F60}

<button onclick="document.getElementById('outerContent').innerHTML='smaller content does not need to scroll #inner should should still be 100% width of #outer'">TRY WITH SMALLER CONTENT</button> 
 

 
<div id='outer'> 
 
    <span id='outerContent'>Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which 
 
    causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which 
 
    causes scroll</span> 
 

 
    <div id='inner'>INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV 
 
    ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR 
 
    </div> 
 
</div>

Answer 1

はい、それは非常によく可能です。

width:autoとdisplay:block〜#innerを適用する必要があります。これらはほとんどの（またはすべての）ブラウザでデフォルトで適用されるので、実際にこれらを設定する必要はありません。ただし、CSS行3（div { width: 200px }）に固定幅を適用すると、デフォルトの動作が削除されます。#innerは親の幅に合わせて調整されます。

/* The fixed width is removed from div... */ 
div { 
    background: rgba(0, 0, 0, 0.2); 
    height: 400px; 
    overflow-y: auto 
} 

/* ...and applied only to #outer */ 
#outer { height: 400px; width: 200px; } 
#inner { height: 200px; } 

が、これはthis fiddle

---

にどのように動作するかを参照してください。それとも、両方にwidth:200pxを適用することができます。

---

あなたはどちらかではなく、両方のdiv、単独の#outerにwidth:200pxを適用することによって、この問題を解決することができますdivs（現在行っているように）を入力してwidth:autoを#innerに適用して元に戻します。

/* Fixed width applied to both divs... */ 
div { 
    background: rgba(0, 0, 0, 0.2); 
    height: 400px; 
    width: 200px; 
    overflow-y: auto 
} 

/* ...and the width is reverted to default on #inner */ 
#outer { height: 400px; } 
#inner { height: 200px; width: auto; } 

this fiddle

Answer 2

における第二のスニペットちょうど#innerはwidth:auto可能にするものを参照してください。

このように（ブロック要素であるため）、できるだけ多くの領域が占有されますが、必要なときに必要な場所にスクロールバーが表示されます。

div { 
 
    background: rgba(0, 0, 0, 0.2); 
 
    width: 200px; 
 
    height: 400px; 
 
    overflow-y: auto 
 
} 
 
#outer { height: 400px; } 
 
#inner { height: 200px; width:auto;} 
 
button { float: right; color: #F60}

<button onclick="document.getElementById('outerContent').innerHTML='smaller content does not need to scroll #inner should should still be 100% width of #outer'">TRY WITH SMALLER CONTENT</button> 
 

 
<div id='outer'> 
 
    <span id='outerContent'>Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which 
 
    causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which 
 
    causes scroll</span> 
 

 
    <div id='inner'>INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV 
 
    ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR 
 
    </div> 
 
</div>