JSFiddle - React, Tailwind, and code Playground

by BrandonCratty

HTML

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="margin-end">
  
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap;
  border: 1px solid red;
  width: 170px;
  overflow: scroll;
  padding: 5px;
}
.scrollSection {
  display: flex;
  flex-flow: row nowrap;
  width: 170px;
  overflow: scroll;
  padding: 1px;
}
.margin-end {
  background: blue;
  width: 10px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-right: 0px;
  flex-shrink: 0;
  margin-left: -10px;
}
.box {
  background: gray;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-right: 10px !important;
  flex-shrink: 0;
  /* padding-right: 10px !important; */
}
.container:nth-last-child(2) {
  margin-right: 0px !important;
  background: blue !important;
}