JSFiddle - React, Tailwind, and code Playground

by Viktor

HTML

<div class="header">
  This is my sticky header
</div>

<div class="container">
  <div class="child">
  child1
  </div>
  <div class="child">
  child2
  </div>
  <div class="child">
  child3
  </div>
  <div class="child">
  child4
  </div>
  <div class="child">
  child5
  </div>
  <div class="child">
  child6
  </div>
  <div class="child">
  child7
  </div>
  <div class="child">
  child8
  </div>
  <div class="child">
  child9
  </div>
  <div class="child">
  child
  </div>
</div>
<div class="bigdiv">
  Very long div
</div>

CSS

html, body{
  width:100%;
  background-color:red;
  opacity:0.9;
  padding:0;
  margin:0;
}

.header{
  position:sticky;
  top:0;
  left:0;
  background-color:gray;
  height: 100px;
  padding:0;
}

.container{
  display: flex;
}

.child{
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border: 1px solid #D8D8D8;
  background-color: white;
  font-weight: bold;
  word-wrap: break-word;
}

.bigdiv{
  width:1000px;
  height:1000px;
}