要素のオーバーフロー部分にCSSスタイルが適用されない

Question

ユーザーがJavaScriptを使用してウィンドウを水平方向にスクロールするときに、要素にスタイルを適用する必要があります。要素はウィンドウよりも広い。スタイルを後で追加すると、横にスクロールして残りの部分がウィンドウからはみ出しているのを確認する前に表示できる部分にのみスタイルが適用されます。

https://codepen.io/sleepydada/pen/RLBqYW

HTML：

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

はCSS：

* { 
    box-sizing: border-box; 
} 
ul { 
    list-style: none; 
    display: flex; 
    border-right: 13px solid yellow; 
    padding:0; 
    li { 
    background:red; 
    flex: 0 0 250px; 
    height: 250px; 
    border: 1px solid black; 
    box-shadow: 0 4px 2px -2px gray; 
    } 
    &.added { 
    border: 10px solid blue; 
    } 
} 

JS：

var ul = document.querySelector('ul') 
window.addEventListener('scroll', function() { 
    ul.classList.add('added') 
}) 

Answer 1

コンテナが最初に設定し、そのサイズの上に展開することを可能にする、ことができますつかいます テーブルレイアウト。 https://www.w3.org/TR/CSS2/tables.html#auto-table-layout

...テーブルの幅は、その列の幅によって与えられている...あなたがflexを使用して、子どもたちがラップすることはできません。この場合

。 display:table + table-cellは同じ動作をしますが、必要に応じて拡張します。それが動作G-Cyrの@

var ul = document.querySelector('ul') 
 
window.addEventListener('scroll', function() { 
 
    ul.classList.add('added') 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    display: table; 
 
    border-right: 13px solid yellow; 
 
    padding: 0; 
 
    height: 250px; 
 
    width: 100%;/* is this needed ? */ 
 
} 
 
ul li { 
 
    background: red; 
 
    display: table-cell; 
 
    min-width: 250px; 
 
    border: 1px solid black; 
 
    box-shadow: 0 4px 2px -2px gray; 
 
} 
 
ul.added { 
 
    border: 10px solid blue; 
 
}

<ul> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

https://codepen.io/gc-nomade/pen/QqBzaZ/