您需要做的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; background: lightgreen; overflow-y: auto; word-wrap: break-word; }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 > <img src="header.jpg" alt=""> </header> <header > <img src="header.jpg" alt=""> </header><div > <span onclick="openNav()">☰ Menu</span> <div id="mySidenav" > <a href="javascript:void(0)" onclick="closeNav()">×</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 > <h1>Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssst</h1> </div> <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> <li><a href="#">Information Page</a></li> </ul></div><footer >©2017</footer>
