JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<p>Scroll to the right, there should be no extra space after the 4th yellow item</p>
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  
  <div class="marker child--ignored"></div>
</div>

CSS

.parent {
  width: 400px;
  overflow-x: scroll;
  height: 100px;
  background: red;
  display: grid;
  grid-auto-flow: column;
  grid-column-gap: 20px;
  grid-auto-columns: 100px;
}

.child {
  background: yellow;
}

.child--ignored {
  background: blue;
  
    /* TODO: make the grid columns ignore this */
  clip-path: inset(0px 0px 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}