I'm working through The Odin Project and I'm having trouble making my main content take up the rest of the space of the browser.
Right now it looks like this:

The 1px solid red border is as far as the main content goes. I have tried this but it's not allowing for a fixed header and footer. I have also tried some other flex solutions. Those are commented out in the code.
Am I just doing this whole thing wrong? Is there a standard way that I don't know about?
index.html:
<body>
    <div class="header">
        <h1>
            MY AWESOME WEBSITE
        </h1>
    </div>

    <div class="main-content">
        <div class="sidebar">
            <ul>
                <li><a href="#">⭐ - link one</a></li>
                <li><a href="#">🦸🏽‍♂️ - link two</a></li>
                <li><a href="#">🖌️ - link three</a></li>
                <li><a href="#">👌🏽 - link four</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem
                dignissimos
                maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit
                corrupti veritatis minima porro?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam
                maiores
                velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi
                odit
                ea.
            </div>
            <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
                eligendi
                aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
                esse
                autem?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
                amet
                adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
                minima
                laboriosam eos!</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi
                eligendi
                aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia
                esse
                autem?</div>
            <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius
                amet
                adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum
                minima
                laboriosam eos!</div>
        </div>
    </div>

    <div class="footer">
        The Odin Project ❤️
    </div>
</body>

</html>

style-07.css:
:root{
    --header-height: 72px;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    min-height: 100vh;
    height: 100%;
}

.main-content{
    display: flex;
    height: 100%; /* If I use px units it will force the main content to go down but I know that is not ideal. */
    padding-top: var(--header-height); 
    flex-direction: row;
    border: 1px solid red;
    /* Things I have tried from other answers*/
    /* flex: 1 1 auto; */
    /* height: calc(100% - var(--header-height)); */
}

.sidebar{
    flex-shrink: 0;
}

.content {
    padding: 32px;
    display: flex;
    flex-wrap: wrap;
}

.card {
    width: 300px;
    padding: 16px;
    margin: 16px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: var(--header-height);
    background: darkmagenta;
    color: white;
    padding: 0px 15px;
}

h1 {
    font-weight: 1000;
}

.footer {
    height: var(--header-height);
    background: #eee;
    color: darkmagenta;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar {
    width: 300px;
    background: royalblue;
    box-sizing: border-box;
    padding: 16px;
}

.card {
    border: 1px solid #eee;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
    border-radius: 4px;
}

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: white;
    font-size: 24px;
}

li{
    margin-bottom: 16px;
}


How do I get my main content to take up the rest of the space left over after the header and footer?
You can use flex diplay on body instead of using instead of fixed on header and footer and make the body display flex with column direction, then for main-content all you need is to set flex: 1 and remove padding top, flex: 1 will make sure that main-content take any remaining space in the parent. Set the body height to height: 100vh and overflow: hidden, for man-content, set overflow: auto.
Additionally, To make sidebar sticky when scrolling,  I added position: relative; to main-content and position: sticky; to the sidebar.
To force header and footer heights and prevent them to be squeezed by the flex position, use min-height instead of height as I modified in the code.
Try to view the run code in full page, if you have any further questions, comment below.


:root {
  --header-height: 72px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  height: 100vh;
  overflow:hidden;
  
  display: flex; 
  flex-direction: column;
}

.main-content {
  flex: 1;
  display: flex;
  overflow-y: auto;
  /* If I use px units it will force the main content to go down but I know that is not ideal. */
  flex-direction: row;
  border: 1px solid red;
  /* Things I have tried from other answers*/
  /* flex: 1 1 auto; */
  /* height: calc(100% - var(--header-height)); */
  
  position: relative;
}



.content {
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 300px;
  padding: 16px;
  margin: 16px;
}

.header {

 
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  background: darkmagenta;
  color: white;
  padding: 0px 15px;
}

h1 {
  font-weight: 1000;
}

.footer {
  min-height: var(--header-height);
  background: #eee;
  color: darkmagenta;
 
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar {
  width: 300px;
  background: royalblue;
  box-sizing: border-box;
  padding: 16px;
  
  position: sticky;
  top: 0;
  
  white-space: nowrap;
  min-height: 250px;
}

.card {
  border: 1px solid #eee;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
  border-radius: 4px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: white;
  font-size: 24px;
}

li {
  margin-bottom: 16px;
}
<body>
  <div class="header">
    <h1>
      MY AWESOME WEBSITE
    </h1>
  </div>

  <div class="main-content">
    <div class="sidebar">
      <ul>
        <li><a href="#">⭐ - link one</a></li>
        <li><a href="#">🦸🏽‍♂️ - link two</a></li>
        <li><a href="#">🖌️ - link three</a></li>
        <li><a href="#">👌🏽 - link four</a></li>
      </ul>
    </div>
    <div class="content">
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.
      </div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
      </div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
      <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?
      </div>
      <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
    </div>
  </div>

  <div class="footer">
    The Odin Project ❤️
  </div>
</body>

</html>



