<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html,body,ul{
height:100%;
}
body{
margin:0
}
ul{
display:flex;
flex-direction:column;
padding:0;
margin:0;
}
li{
background:yellow;
margin:0;
list-style:none;
height:20px;
}
li:first-child,
li:last-child{
height:50px;
background-color: green;
}
li:nth-child(2){
flex:1;
overflow: scroll;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</li>
<li>3</li>
</ul>
</body>
</html>
![flexbox常用布局上下固定，中间滚动-LMLPHP]( "flexbox常用布局上下固定，中间滚动-LMLPHP")