溢出-y 不适用于 fr

The CSS solution by Takit Isy will also scroll the div class="menu".

I think when you want to solve that problem, you have to change the html code a little bit.

Starting from your original code, wrap a new div style="position:relative" around your div class="data" and add this to the CSS of .data:

position:absolute;
height:100%;
width:100%;

Explanation:

Because of fr the last child node of lateralInfo will get some sort of min-height. But it won't get a max-height and you can't assign that manually, because it would be a formular. That's why your old solution not worked.

因此必须解决两个问题：不要让最后一个子元素lateralInfo变大，并为可滚动元素提供某种最大高度。环绕新 divdiv class="data"并给出div class="data" position:absolute解决第一个问题（因为新 div 不会随着它的绝对定位内容而增长）。第二个问题由height:100%（这是可行的，因为我们有具有所需高度的新父元素）解决了。

完整代码：

<div id="container">
  <header></header>
  <div id="content">
     <div class="something"></div>
     <div class="lateralInfo">
        <div class="menu">menu doesn't scroll away</div>
        <div style="position:relative">
           <div class="data">
              // A lot of data 
           </div>          
        </div>
     </div>      
  </div>
  <footer></footer>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
    border:0;
    box-sizing: border-box;
}

 #container{
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 50px 1fr 10px;
    align-items:stretch;
    justify-items:stretch;
}
#content{
    display: grid;
    grid-template-columns: 1fr 300px;
    background-color:rgb(128, 126, 126);
}
.something{
    position: relative;
    overflow-y:hidden;
    overflow-x:hidden;
    padding:10px;
    margin:30px 0px;
} 
.lateralInfo{
    background-color:#eaeaea;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    height: 100%;
    align-content:flex-start;
    display:grid;
    grid-template-rows: auto 1fr;
}
.data{
     position:absolute;
     height:100%;
     width:100%;
     padding:10px;
     display:grid;
     grid-gap:10px;
     align-content: flex-start;
     overflow-y: scroll;
}