JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div class="bar_left">bar_left</div>
<div class="container">
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
    <p>container</p>
</div>
<div class="bar_right">bar_right</div>

CSS

/* Grundeinstellungen */
* {margin:0;padding:0}
html,body {height:100%}
/* korrigiertes CSS */
.bar_left, .bar_right {
  background-color: gray; /* Farbname heißt nicht "grey" */
  width: 100px;
  height: 100%;
  position: fixed;
  top:0 /* Startposition von oben */
}
.bar_left {
  /*float: left;*/ /* auskommentiert = deaktiviert */
  left:0 /* Startposition von links */
}
.bar_right {
  /*float: right;*/ /* auskommentiert = deaktiviert */
  /*margin-left: -100px;*/ /* auskommentiert = deaktiviert */
  right:0; /* Startposition von rechts */
  background-color: red
}
.container {
  /*width: 100%;*/ /* Breite ergibt sich durch margin-right & -left */
  min-height: 100%; /* anstatt height -> Hintergrund für scrollbaren Inhalt bleibt erhalten */
  background-color: pink;
  margin: 0 100px
}
/* Einstellung für <p>-Element */
.container p {padding-bottom:150px}
.container p:last-child {padding-bottom:0}