如何实现子元素占满父容器垂直空间并在超出时滚动（纯CSS方案）

要实现父容器占满视口剩余垂直空间，子容器填充父容器可用空间且内容超出时触发垂直滚动，纯CSS方案如下：

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        body{
            background-color: azure;            
        }

        #parent{
            background-color: lightcoral;
            display: flex;
            flex-direction: column;
            height: 100vh;
            padding: 1rem;
            box-sizing: border-box;
        }  
        #child{
            background-color: green;
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id='parent'>
  This parent should fill all the space until the end of view port
  <div id='child'>
    This child should 'trigger' a scrolling once it fills the available space (from parent).

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit velit et sodales vehicula. Ut nec eleifend orci. Duis commodo hendrerit lorem quis tempus. Nullam scelerisque sed justo quis fringilla. Aenean odio ligula, lobortis porttitor finibus nec, consequat vel massa. Sed odio augue, efficitur vitae tortor at, egestas fermentum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus placerat varius vestibulum. Suspendisse posuere ultricies interdum. Nullam dapibus ut velit a placerat. Nunc ullamcorper sit amet urna eget molestie. Maecenas ullamcorper dui ut elit tristique, sit amet rutrum ante maximus. Curabitur posuere, est quis rhoncus facilisis, enim ex semper eros, eu pulvinar sapien massa egestas quam. Aenean dictum dolor eget arcu tincidunt rutrum.
    In eu euismod lacus. Sed efficitur quam ac enim tincidunt, eget tempus libero finibus. Nulla varius varius pulvinar. Etiam urna dolor, vulputate eget lobortis et, ornare nec lacus. Pellentesque nec bibendum tellus, id interdum urna. Praesent cursus vitae ligula nec vulputate. Vivamus nec ex nec ex bibendum placerat interdum sit amet ipsum. Nulla vel ultrices erat, vel fringilla dolor. Proin auctor turpis nec dui tincidunt interdum. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit velit et sodales vehicula. Ut nec eleifend orci. Duis commodo hendrerit lorem quis tempus. Nullam scelerisque sed justo quis fringilla. Aenean odio ligula, lobortis porttitor finibus nec, consequat vel massa. Sed odio augue, efficitur vitae tortor at, egestas fermentum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus placerat varius vestibulum. Suspendisse posuere ultricies interdum. Nullam dapibus ut velit a placerat. Nunc ullamcorper sit amet urna eget molestie. Maecenas ullamcorper dui ut elit tristique, sit amet rutrum ante maximus. Curabitur posuere, est quis rhoncus facilisis, enim ex semper eros, eu pulvinar sapien massa egestas quam. Aenean dictum dolor eget arcu tincidunt rutrum.
    In eu euismod lacus. Sed efficitur quam ac enim tincidunt, eget tempus libero finibus. Nulla varius varius pulvinar. Etiam urna dolor, vulputate eget lobortis et, ornare nec lacus. Pellentesque nec bibendum tellus, id interdum urna. Praesent cursus vitae ligula nec vulputate. Vivamus nec ex nec ex bibendum placerat interdum sit amet ipsum. Nulla vel ultrices erat, vel fringilla dolor. Proin auctor turpis nec dui tincidunt interdum. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit velit et sodales vehicula. Ut nec eleifend orci. Duis commodo hendrerit lorem quis tempus. Nullam scelerisque sed justo quis fringilla. Aenean odio ligula, lobortis porttitor finibus nec, consequat vel massa. Sed odio augue, efficitur vitae tortor at, egestas fermentum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus placerat varius vestibulum. Suspendisse posuere ultricies interdum. Nullam dapibus ut velit a placerat. Nunc ullamcorper sit amet urna eget molestie. Maecenas ullamcorper dui ut elit tristique, sit amet rutrum ante maximus. Curabitur posuere, est quis rhoncus facilisis, enim ex semper eros, eu pulvinar sapien massa egestas quam. Aenean dictum dolor eget arcu tincidunt rutrum.
    In eu euismod lacus. Sed efficitur quam ac enim tincidunt, eget tempus libero finibus. Nulla varius varius pulvinar. Etiam urna dolor, vulputate eget lobortis et, ornare nec lacus. Pellentesque nec bibendum tellus, id interdum urna. Praesent cursus vitae ligula nec vulputate. Vivamus nec ex nec ex bibendum placerat interdum sit amet ipsum. Nulla vel ultrices erat, vel fringilla dolor. Proin auctor turpis nec dui tincidunt interdum. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit velit et sodales vehicula. Ut nec eleifend orci. Duis commodo hendrerit lorem quis tempus. Nullam scelerisque sed justo quis fringilla. Aenean odio ligula, lobortis porttitor finibus nec, consequat vel massa. Sed odio augue, efficitur vitae tortor at, egestas fermentum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus placerat varius vestibulum. Suspendisse posuere ultricies interdum. Nullam dapibus ut velit a placerat. Nunc ullamcorper sit amet urna eget molestie. Maecenas ullamcorper dui ut elit tristique, sit amet rutrum ante maximus. Curabitur posuere, est quis rhoncus facilisis, enim ex semper eros, eu pulvinar sapien massa egestas quam. Aenean dictum dolor eget arcu tincidunt rutrum.
    In eu euismod lacus. Sed efficitur quam ac enim tincidunt, eget tempus libero finibus. Nulla varius varius pulvinar. Etiam urna dolor, vulputate eget lobortis et, ornare nec lacus. Pellentesque nec bibendum tellus, id interdum urna. Praesent cursus vitae ligula nec vulputate. Vivamus nec ex nec ex bibendum placerat interdum sit amet ipsum. Nulla vel ultrices erat, vel fringilla dolor. Proin auctor turpis nec dui tincidunt interdum. 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit velit et sodales vehicula. Ut nec eleifend orci. Duis commodo hendrerit lorem quis tempus. Nullam scelerisque sed justo quis fringilla. Aenean odio ligula, lobortis porttitor finibus nec, consequat vel massa. Sed odio augue, efficitur vitae tortor at, egestas fermentum est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus placerat varius vestibulum. Suspendisse posuere ultricies interdum. Nullam dapibus ut velit a placerat. Nunc ullamcorper sit amet urna eget molestie. Maecenas ullamcorper dui ut elit tristique, sit amet rutrum ante maximus. Curabitur posuere, est quis rhoncus facilisis, enim ex semper eros, eu pulvinar sapien massa egestas quam. Aenean dictum dolor eget arcu tincidunt rutrum.
    In eu euismod lacus. Sed efficitur quam ac enim tincidunt, eget tempus libero finibus. Nulla varius varius pulvinar. Etiam urna dolor, vulputate eget lobortis et, ornare nec lacus. Pellentesque nec bibendum tellus, id interdum urna. Praesent cursus vitae ligula nec vulputate. Vivamus nec ex nec ex bibendum placerat interdum sit amet ipsum. Nulla vel ultrices erat, vel fringilla dolor. Proin auctor turpis nec dui tincidunt interdum.     
  </div>
</div>
</body>
</html>

关键CSS属性说明 #

• html, body { margin: 0; padding: 0; height: 100%; }：清除浏览器默认边距，确保根元素能占满整个视口高度。
• #parent { display: flex; flex-direction: column; height: 100vh; }：将父容器设置为垂直方向的flex布局，用100vh强制它占满视口高度；box-sizing: border-box避免内边距撑大容器尺寸。
• #child { flex: 1; overflow-y: auto; }：flex:1让子容器自动填充父容器的剩余垂直空间；overflow-y: auto在子容器内容超出可用空间时自动显示垂直滚动条。

内容的提问来源于stack exchange，提问作者Alex