flex布局造成子元素的height值不确定，从而无法设置滚动问题

最新推荐文章于 2024-07-16 16:30:54 发布

jiladahe1997

最新推荐文章于 2024-07-16 16:30:54 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： css flex css3

本文链接：https://blog.csdn.net/jiladahe1997/article/details/107736576

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

flex布局目前的浏览器支持率已经很高了，在以前，作为一个前端开发工程师，对css是真的又爱又恨，各种float、absolute布局hack乱飞。现在有了flex，终于好点了，但是我在一个项目中打算全篇使用flex布局时发现了一个问题。

我的项目布局如下：

写了一个在线demo地址：https://codepen.io/jiladahe1997/pen/xxZvYXe
（点击demo中的“增加一个元素”按钮，可以增加side container中的元素）

现在的问题在于：

一般而言我们要将一块区域设置为可以滚动的需要这样写：

.sidebar-content{
  height: xxxpx;
  overflow: auto;
}

但是由于全篇采用的都是flex布局，所有元素的高度都是自适应的，所以这里我们拿不到这个height的具体值，也就无法设置滚动了。

解决方法

先上修改好之后的demo:https://codepen.io/jiladahe1997/pen/QWyeQxa
（点击“增加一个元素”按钮，可以增加side container中的元素）

思路描述

查找了大量资料之后，也没找到完全的解决办法，经过N次尝试终于发现了。要这样设置：

<div class="header">这是Header</div>
<div class="container">
  <div class="sidebar">
    <div class="sidebar-title">这是sidebar title</div>
    <div class="sidebar-content">这是sidebar content</div>
  </div>
  <div class="app">
    这是APP
    <button onclick="clickHandle()">点我增加一个content</button>
  </div>
</div>

.container {
  flex-grow: 1;
  display: flex;
  overflow: auto;
}

.container .sidebar {
  width:200px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.container .sidebar .sidebar-content{
  overflow: auto;
}

关键在于三个地方：