JSFiddle - React, Tailwind, and code Playground

by duarteleao

HTML

<div class="container height-overflow-auto container-1">
  <div class="leaf leaf-1">Leaf 1</div>

  <div class="container height-overflow-hidden container-2">
    <div class="leaf leaf-2">Leaf 2</div>
    <div class="leaf leaf-3">Leaf 3</div>
    
    <div class="container height-overflow-auto container-3">
      <div class="auto-child leaf leaf-4">Leaf 4</div>
      <div class="leaf leaf-5">Leaf 5</div>
    </div>
  </div>
  
  <div class="fixed-child leaf-6">Leaf 6</div>
</div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
	margin: 0;
  border: none;
  font-size: 14px;
  line-height: 1.5em; /* 21px */
}

body,
html {
  height: 100%;
  padding: 15px;
}

/* TYPES */
.container {
  flex: auto;
  
  /* Same as .height-lock (see below).
     Override by combining with one of:
     - .height-overflow-hidden
     - .height-overflow-auto
   */
  min-height: auto;
  overflow-y: visible;
  
  /* To ignore the children's min-height, at least one of: */
  /* min-height: 0; */
  /* min-height: 4em; */
  /* overflow-y: hidden; */
  /* overflow-y: auto; */
  
	display: flex;
  flex-direction: column;
  
  outline: 1px solid black;
}

/* To "inherit"/incorporate the children's min-height. 
   The default.
   The root container should use one of the other modes,
   as "overflow" really becomes visible, 
   instead of causing parent container to grow.
 */
.container.height-lock {
  min-height: auto;
  overflow-y: visible;
}

/* To ignore the children's min-height and 
   hide the overflow 
   when shorter than children's min-height.
   min-height: 0;
 */
.container.height-overflow-hidden {
  min-height: 0;
  overflow-y: hidden;
}

/* To ignore the children's min-height and 
   show a V scrollbar 
   when shorter than children's min-height.
   
   All container ancestors must have either:
   - height-overflow-auto
   - height-overflow-hidden
 */
.container.height-overflow-auto {
  min-height: auto;
  overflow-y: auto;
}

@supports selector(:has(*)) {
  /* Transform any container 
     with height-lock (or implied)
     and which has a height-overflow-auto descendant
     into height-overflow-auto */
  .container:not(
    .height-overflow-auto,
    .height-overflow-hidden):has(.container.height-overflow-auto) {
    min-height: 4em;
    overflow-y: auto;
  }
}

.container > *,
.leaf {
  padding-left: 10px;
  padding-right: 10px;
}

.container > :not(.container),
.leaf {
	flex: none;
  
  background: #aaa;
  padding: 10px;
  outline: 1px solid...