css flex 纵向布局子容器的子容器高度100%时内容会超出

问题描述

最近用 flex 做界面的时候发现个奇怪的问题，纵向布局的时候顶部固定高度的工具栏，下方一个撑满的内容容器（height:100%，并且允许缩放），一开始布局很正常。
但是在内容容器里放一个height:100% 的 div 之后就出问题了，主容器的高度不会被flex缩小，造成内容高度撑开。

图片描述

相关代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
    #main
    {
        width:220px;
        height:300px;
        padding:1px;
        box-sizing:border-box;
        border:1px solid black;
        display:flex;
        flex-direction:column;
        justify-content:space_between;
        align-items:stretch;
    }

    div
    {
        box-sizing:border-box;
    }
    .d1{
        width:100%;
        height:40px;
        margin-bottom:20px;
        background-color:coral;
        flex-shrink:0;
    }
    .d2{
        height:100%;
        padding:5px;
        background-color:lightblue;
        opacity:0.8
    }
    .dd2{
        height:100%;
        background-color:#e1e1e1;
    }
</style>
</head>
<body>
    <div id="main">
      <div class="d1">顶部</div>
      <div class="d2">
        <div class="dd2"></div>    
      </div>
    </div>
</body>
</html>

因为实际使用中应该是不确定置顶置底的内容是否存在，不能置顶内容容器的高度。求教如何修正这个问题呢？让他高度不要撑开。

阅读 13.3k

<style> * { padding: 0; margin: 0; } .wrapper{ height: 100vh; display: flex; overflow: hidden; flex-direction: column; justify-content: space-between; } .head{ height: 88px; background: grey; flex-shrink: 0; } .content{ border: 10px solid lightblue; overflow-y: auto; } .word{ height: 4000px; } </style> <body> <div class="wrapper"> <div class="head"></div> <div class="content"> <div class="word"></div> </div> </div> </body>

css flex 纵向布局子容器的子容器高度100%时内容会超出

问题描述

相关代码

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

如何在CSS中实现滚动条不溢出圆角框？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？

怎么用css 实现这个形状？

表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？