擬似要素が親コンテナの幅/スクロール幅を変更しないようにしますか？

Question

私は緑の要素がコンテナである赤いスクロール領域の幅を増やさないように、擬似要素の親である青要素の右側に緑の領域を配置しようとしています。私の実際のユースケースはもう少し複雑ですが、疑似要素を使用しているため、この例では問題をうまく設定しています。青の幅が十分大きい場合、スクロール領域をスクロールしたいことを示すために、2つの青領域と2つの緑領域を単に含めました。私はちょうど緑の面積が計算の一部にしたくない：

* {margin:0;padding:0} 
 

 
div { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    overflow: auto; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    height: 50px; 
 
    position: relative; 
 
    background-color: blue; 
 
    vertical-align: top; 
 
} 
 

 
span:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 100%; 
 
    width: 500px; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-color: green; 
 
}

<div> 
 
    <span style="width:50px"></span> 
 
    <span style="width:250px"></span> 
 
</div>

JS Fiddle

理想的には緑色の擬似要素は完全レイアウトから引き出されていない持っていることになります幅。問題は、背景色が動作するためには幅が必要なことです。私はこのために背景色を使うことができないと強く思っています。輪郭線のようなものなら500pxの緑色、存在することが解決策になるだろうが、私はそのようなものを見つけることはできない。ボックスシャドー、境界線右、または他のものはすべて幅に追加されるため、使用できません。緑の領域を赤のスクロール領域に含めることを許可するメカニズムはCSSにはありますか？

Answer 1

オーバーフローするように設定された内側のコンテナを使用します。絶対配置された要素が幅およびスクロール領域の計算に含まれないようにします。

最小幅：100％を使用します。内側容器が少なくとも外側容器の全幅を占めることを保証する。

* { margin: 0; padding: 0; } 
 
#first { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    overflow: auto; 
 
} 
 
#second { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    min-width: 100%; 
 
} 
 
span { 
 
    display: inline-block; 
 
    height: 50px; 
 
    position: relative; 
 
    background-color: blue; 
 
    vertical-align: top; 
 
} 
 
span:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 100%; 
 
    width: 500px; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-color: green; 
 
}

<div id="first"> 
 
    <div id="second"> 
 
    <span style="width:50px;"></span> 
 
    <span style="width:250px;"></span> 
 
    </div> 
 
</div>

JS Fiddle