您需要做的2件事：

• 将 flex-shrink 值flex: 1 0 auto从更改0为1（flex: 1 1 auto），以便content允许元素收缩

• 由于单词很长，还需要添加word-wrap: break-word以在单词内插入换行符，以防止文本溢出

请注意，word-wrap已重命名为overflow-wrap，尽管并非所有浏览器都支持新名称，所以如果您要使用它，我现在也将保留旧名称。

堆栈片段

function openNav() {

    document.getElementById("mySidenav").style.width = "250px";

}



function closeNav() {

    document.getElementById("mySidenav").style.width = "0";

}


      body {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

  text-align: center;

}

body .header {

  width: 100%;

  height: 182px;

  background: white;

}

body .holygrail-body {

  flex: 1 0 auto;

  display: flex;

  width:1000px;

  margin-right:auto;

  margin-left:auto;

}

body .holygrail-body .content {

  flex: 1 1 auto;                            /*  changed  */

  background: lightgreen;

  overflow-y: auto;

  word-wrap: break-word;                     /*  added  */

}

body .holygrail-body .nav {

  width: 240px;

  list-style: none;

  text-align: left;

  order: -1;



  margin: 0;

}

body .holygrail-body .aside {

  width: 100px;

  background: orange;

}

body .footer {

  width: 100%;

  height: 60px;



}

.sidenav {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: #fff;

    overflow-x: hidden;

    transition: 0.5s;

    padding-top: 60px;

}



.sidenav a {

    padding: 8px 8px 8px 32px;

    text-decoration: none;

    font-size: 25px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.sidenav a:hover {

    color: #f1f1f1;

}



.sidenav .closebtn {

    position: absolute;

    top: 0;

    right: 25px;

    font-size: 36px;

    margin-left: 50px;

}

  .mobile-header{display: none;}

.hamburger{display: none;}

ul, ol {

    margin-top:10px;



}

.nav li {

    list-style: none outside none;

    line-height: 36px;

    margin-left:-15px;

}

.nav li a {

    color: #5f141f;

    text-decoration: none;

    text-shadow: 2px 1px #f6eaec;

    font-size: 18px;

    margin-left:-15px;

  }

  .sidenav li {

      list-style: none outside none;

      line-height: 36px;

      margin-left:-15px;

  }

  .sidenav li a {

      color: #5f141f;

      text-decoration: none;

      text-shadow: 2px 1px #f6eaec;

      font-size: 18px;

      margin-left:-15px;

    }

@media (max-width: 700px) {

  body .holygrail-body {

    flex-direction: column;

  }

  body .holygrail-body .nav, body .holygrail-body .aside {

    width: 100%;

  }

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

  .hamburger{display: inline;margin-left:-900px;}

  .nav{display: none;}

  .mobile-header{display: inline;}

    .header{display: none;}

}


<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

  <header class="header">

    <img src="header.jpg" style="max-width:1848px; margin-right:auto;margin-left:auto;" alt="">

  </header>

  <header class="mobile-header">

    <img src="header.jpg" style="width:100%;max-width:1848px; margin-right:auto;margin-left:auto;" alt="">

  </header>

<div class="holygrail-body">

  <span class="hamburger" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>

  <div id="mySidenav" class="sidenav">

    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

    <ul>

      <li><a href="#">Home</a></li>

      <li><a href="#">New Items</a></li>

      <li><a href="#">Information Page</a></li>

      <li><a href="#">Information Page</a></li>

      <li><a href="#">Information Page</a></li>

      <li><a href="#">Information Page</a></li>

      <li><a href="#">Information Page</a></li>

      <li><a href="#">Information Page</a></li>

      <li><a href="#">Information Page</a></li>

      <li><a href="#">Information Page</a></li>

    </ul>

  </div>

  <div class="content">



  <h1>Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssst</h1>



  </div>



  <ul class="nav">

    <li><a href="#">Home</a></li>

    <li><a href="#">New Items</a></li>

    <li><a href="#">Information Page</a></li>

    <li><a href="#">Information Page</a></li>

    <li><a href="#">Information Page</a></li>

    <li><a href="#">Information Page</a></li>

    <li><a href="#">Information Page</a></li>

    <li><a href="#">Information Page</a></li>

    <li><a href="#">Information Page</a></li>

    <li><a href="#">Information Page</a></li>

    <li><a href="#">Information Page</a></li>



  </ul>





</div>

<footer class="footer">©2017</footer>