CSS styles not applied to overflowing part of element

Question

I need to apply some styles to an element when the user scrolls the window horizontally, using JavaScript. The element is wider than the window. When The styles are added later, they are applied only to the part that you can see before scrolling horizontally to see the rest that's overflowing out of the window.

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

to allow a container to expand over its size initially set , you can use the table-layout . https://www.w3.org/TR/CSS2/tables.html#auto-table-layout

... the table's width is given by the width of its columns ...

In this case you use flex and do not allow children to wrap. display:table + table-cell will have the same behavior but it will also expand as much as needed.

 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/