JSFiddle - React, Tailwind, and code Playground

by John Love

HTML

<html>

<body>

    <!--
BoltClock's code to scroll inner DIV using window's scrollbar
-->
    <div id="overlayTop" class="overlay"></div>
    <div id="overlayRight" class="overlay"></div>
    <div id="overlayBottom" class="overlay"></div>
    <div id="overlayLeft" class="overlay"></div>

    <div id="roundedCornersWrapper">
      <div id="roundedCorners">
        <div id="scrollableContent">
          <p>
          All this content should scroll 
          up, without moving the red
          border.
          </p>
          
          <p>
          But, as you can see, the content
          leaks thru the red border:
          </p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
          <p>etc etc</p>
        </div>
      </div>
    </div>

</body>

</html>

CSS

.overlay {
  position: fixed;
}

#overlayTop,
#overlayBottom {
  height: 2.5em;
  width: 100%;
}

#overlayLeft,
#overlayRight {
  height: 100%;
  width: 2.5em;
}

#overlayTop {
  top: 0;
}

#overlayLeft {
  left: 0;
}

#overlayRight {
  right: 0;
}

#overlayBottom {
  bottom: 0;
}

body,
#roundedCornersWrapper,
#roundedCorners,
#scrollableContent {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: darkgreen;
}

#roundedCornersWrapper {
  /*
        "padding" = width of .overlay "borders"
    */
  padding: 2.5em 2.5em;
}

#roundedCorners {
  background-color: white;
  border-style: solid;
  border-color: red;
  border-radius: 1.25em;
  border-width: .50em;
}

/*
    This is added white space inside of your
    .overlay "borders" + #roundedCorners.
    This separates the text etc. content from .overlay.
*/
#scrollableContent {
  /*
        v = 0 makes up for leading and
        trailing <p> .. </p> in text
    */
  padding: 0.0em 1.0em;
  /* v,h */
}

/*
    BEGIN the magic needed to make the roundedBodyCorners
    fill the whole window
*/
html,
body {
  height: 100%;
}

#roundedCornersWrapper {
  height: 100%;
}

#roundedCorners {
  height: 100%;
}

#scrollableContent {
  height: 100%;
  /*
   // the whole! idea is to dump the interior scrollbar //
    overflow-y: auto;
 */
}

/*
    END fill magic
*/

/*
    Odds-and-Ends
*/
#scrollableContent {
  font-size: 1.5em;
  /* = 1.5 X 12px from html Selector */
}