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

发布于 2022-09-11 14:26:33 字数 1437 浏览 34 评论 0

问题描述

最近用 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>

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

人生戏 2022-09-18 14:26:33

DOM渲染的顺序是先渲染父节点，再渲染子节点；先渲染靠前的兄弟节点，再渲染靠后的兄弟节点。所以子节点渲染的时候，父节点其实已经渲染好了。而你这里子节点的高度是根据父节点来的，所以父节点渲染的时候并不知道它是多少，自然溢出了。
这种情况通常是设置子节点自适应，比如你例子里的

.d2 {
    flex: auto;
}

另外，看你代码里写了

div {
    width: 100%;
}

div块级元素的宽度本身是自适应的（此处flex-direction是纵向，这个特性还是保持的），这个值多余了。

回复收藏 0

以往的大感动 2022-09-18 14:26:33

div.d1的margin-bottom:20px干嘛的？

div.d2的height:100%肯定肯定超出了啊，用height:calc(100% - 40px)。

回复收藏 0

不必了 2022-09-18 14:26:33

d2不用设置height, 设置overflow-y:auto
写了个demo, head可有可无, 内容容器高度总是尽量大, 不会超出主容器

<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>