JSFiddle - React, Tailwind, and code Playground

by STHayden

HTML

<div class="header"> 
 HEADER
</div>
<div class="mainContainer">
  <div class="primary">
   primary content
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />
   <br /><hr />

  </div>
  <div class="secondary">
    <section id="container" >
        <header id="header" >This is a header</header>
        <article id="content" >
            This is the content that
            <br />
            With a lot of lines.
            <br />
            With a lot of lines.
            <br />
            This is the content that
            <br />
            With a lot of lines.
            <br />
            <br />
            This is the content that
            <br />
            With a lot of lines.
            <br />
            <br />
            This is the content that
            <br />
            With a lot of lines.
            <br />
             <br /><hr />
             <br /><hr />
             <br /><hr />   <br /><hr />
             <br /><hr />
             <br /><hr />   <br /><hr />
             <br /><hr />
             <br /><hr />
             <br /><hr />   <br /><hr />
             <br /><hr />
             <br /><hr />   <br /><hr />
        </article>
        <footer id="footer" >This is a footer</footer>
    </section>
  </div>
</div>
BELOW HERE IS FOOTER STUFF AND NOT PART OF THE ABOVE LAYOUT
   <br /><hr />
   <br /><hr />
   <br /><hr />   <br /><hr />
   <br /><hr />
   <br /><hr />   <br /><hr />
   <br /><hr />
   <br /><hr />   <br /><hr />
   <br /><hr />
   <br /><hr />

CSS

html, body {
    height: 100%;    
}
.mainContainer {

  flex-grow: 1;

  display: grid;
  align-items: stretch;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  
  grid-template-columns: 2fr minmax(300px, 1fr);
  gap: 10px;
  min-width: 720px;
}
.primary {
  
}
.secondary {
  padding-left: 10px;
  width: 320px;
  height: calc(100vh - 50px);

  position: sticky;
  top: 50px;
}
.header {
  background-color: black;
  height: 50px;
  color: white;
  position: sticky;
  top: 0;
  z-index: 99;
}
#container {
    display: flex;
    flex-direction: column;
    background-color: red;
    position: sticky;
    top: 50px;
    outline: 1px solid green;
    height: 100%;
}

#container header {
    background-color: gray;
}
#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#container footer {
    background-color: gray;
}