JSFiddle - React, Tailwind, and code Playground

by arzo

HTML

<div class="superContainer" tabindex=-1>
  Child(orange background div)'s content can NOT be accessed by scrolling with Keyboard
  <div class="container">
    <div class="content"></div>
  </div>
</div>

<div class="superContainer" tabindex=-1>
  Child(orange background div)'s content can be accessed by scrolling with Keyboard
  <div class="container" tabindex=-1>
    <div class="content" tabindex=-1></div>
  </div>

</div>

<div class="superContainer" tabindex=-1>
  Child(orange background div)'s content can be accessed by scrolling with Keyboard
  <div class="container" tabindex=-1>
    <div class="content"></div>
  </div>
</div>

<div class="superContainer" tabindex=-1>
  Child(orange background div)'s content can be accessed by scrolling with Keyboard
  <div class="container">
    <div class="content" tabindex=-1></div>
  </div>
</div>

<div class="superContainer">
  Child(orange background div)'s content can be accessed by scrolling with Keyboard
  <div class="container">
    <div class="content" tabindex=-1></div>
  </div>
</div>

<div class="superContainer">
  Child(orange background div)'s content can be accessed by scrolling with Keyboard
  <div class="container"  tabindex=-1>
    <div class="content"></div>
  </div>
</div>

<div class="superContainer">
  Child(orange background div)'s content can be accessed by scrolling with Keyboard
  <div class="container">
    <div class="content"  tabindex=-1></div>
  </div>
</div>

CSS

.superContainer{
 	display: block;
 	height: 400px;
 	width: 600px;
 	border: 1px solid orange;
  margin: 30px;
  overflow: scroll;
 }
.container {
  border: 1px solid red;
  width : 200px;
  height: 800px;
  overflow-y: scroll;
}
 .content {
  border: 1px solid blue;
  width : 100%;
  height: 1500px;
  box-sizing: border-box;
  background-color: orange;
}
.container::after, .content::after {
  content: "dfgdf";
  display: table;
  clear: both;
}