JSFiddle - React, Tailwind, and code Playground

by jonjohnjohnson

HTML

<div class="outfit">
  <div class="whatever"></div>
  <div class="outfit-panel" contentEditable>
    <div class="outfit-body">

    </div>
  </div>
  <div class="anything"></div>
</div>

CSS

.outfit {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: var(--outfit-scroll);
  --outfit-overflow: calc(var(--outfit-box) - var(--outfit-scroll));
  --outfit-scroll: 50vh;
  --outfit-box: min(180vh, var( --outfit-box-h));
  
  --outfit-box: calc(1.5 * var(--outfit-scroll));
}

.outfit-panel {
  height: var(--outfit-box);
}

.outfit-panel::before,
.outfit-panel::after {
  content: '';
  display: block;
  visibility: visible;
  height: var(--outfit-scroll);
}

.outfit-body {
  z-index: 0;
  position: -webkit-sticky;
  position: sticky;
  overflow: hidden; display: flow-root; box-sizing: border-box;
  height: var(--outfit-box);
  
  bottom: calc(-1 * var(--outfit-overflow));
  margin-top: calc(-1 * var(--outfit-scroll));
  
  top: calc(-1 * var(--outfit-overflow));
  margin-bottom: calc(-1 * var(--outfit-scroll));
}

.outfit-body {
  margin-top: calc(-2 * var(--outfit-scroll));
  margin-bottom: calc(-2 * var(--outfit-scroll));
}

.outfit-panel::before,
.outfit-panel::after {
  height: calc(2 * var(--outfit-scroll));
}







.outfit-body {
  background: #ddd;
  border: 20px solid gray;
}

.outfit-body::after {
  content: 'Lorem ipsum dolor sit amet, consec tetur adipi sicing elit. Excepturi repel lendus aliquam tenetur quidem a, eos, asper natur ab veniam eum culpa vel velit, volup tatibus iusto dolore plac eat eaque eveniet animi prov ident? Lorem ipsum dolor sit amet, consectetur adipis icing elit. Excep turi repell endus aliquam tenetur quidem a, eos, asper natur ab veniam eum culpa vel velit, voluptatibus iusto dolore placeat eaque eveniet animi provident? Excepturi repell endus aliquam tenetur quidem, volup tatibus iusto dolore.';
  display: block;
  width: 0;
}


.whatever {
  height: calc(.5 * var(--outfit-scroll));
  overflow: hidden; /* */
  position: relative;
  z-index: 1;
}

.anything {
  height: calc(.5 * var(--outfit-scroll));
  overflow: hidden; /* */
  position: relative;
  z-index: 1;
}

.whatever,
.anything {
  display:...