解决flex布局中子项目尺寸不受flex-shrink限制


Posted in HTML / CSS onMay 11, 2022

预期是写一个如下所示的布局内容:

解决flex布局中子项目尺寸不受flex-shrink限制

即有一个固定高度的外部容器,顶部的header已知高度,在header占据了固定高度后,剩下的都分给body部分。因此采用flex布局,header设置flex-shrink为0,不自动收缩,body则flex-shrink为1,使其高度压缩为剩余高度。这个操作看起来挺符合直觉的。
然后在上述的body中有个content-wrapper内容块,设置height: 100%以及overflow: auto来让他高度占满父容器并且内容过多时生成滚动条。

demo代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试pre标签</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            html, body {
                height: 100%;
            }

            .container {
                width: 800px;
                height: 500px;
                display: flex;
                flex-direction: column;
            }
            .header {
                height: 100px;
                background-color: rgb(226, 110, 110);
                flex-shrink: 0;
            }
            .body {
                flex-shrink: 1;
                background-color: rgb(146, 146, 223);
            }

            .content-wrapper {
                height: 100%;
                overflow: auto;
            }
        </style>
    </head>
<body>

    <div class="container">
        <div class="header">Header</div>
        <div class="body">
            <div class="content-wrapper">
                <div style="height: 1000px">很多很多的内容</div>
            </div>
        </div>
    </div>

</body>
</html>

但最终效果确实如此:

解决flex布局中子项目尺寸不受flex-shrink限制

很明显body的高度并没有被限制,实际的高度是子元素的内容高度。

So why? 用搜索引擎搜了许久没找到理想的答案,这种问题确实也很难以表述。我现在真正想知道的是:为什么我给flex布局中的子项目设置了flex-shrink: 1,但它却没按我预期的表现呢。网络上相关的资料都仅仅告知如使用的,对于我想知道的,最适合的资料应该是翻flex这块的实现标准。

依据https://www.w3.org/TR/css-flexbox-1/一节中的描述,首先是这么句话:

Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties.

可知弹性项目的min-widthmin-height的默认值是auto,并不同于其他布局中的情况(默认为0)。

再往下来看:

To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

这段话描述了在主轴方向上,上述的auto值应该如何计算弹性项目的宽/高度(我的例子中是flex-direction: column,因此主轴为垂直方向,关注点是min-height)。由上可知,对于弹性项目如果其是非滚动容器,min-height值为内容高度;反之则是0。

综上,demo中的问题,修改方法之一就是,将div.body变为滚动容器,即设置overflowscrollauto或者hidden(没错hidden属性也是,因为hidden只是隐藏溢出的内容不提供滚动条,但仍然可以通过js控制里边的内容来达到滚动效果,所以该情况也是滚动容器)。另一种方式是我们可以直接覆盖min-height的默认值,即显示设置min-height: 0 也能达到目的。

到此这篇关于flex布局中子项目尺寸不受flex-shrink限制的问题解决的文章就介绍到这了!

 

Tags in this post...

HTML / CSS 相关文章推荐
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
css3 选择器
May 11 #HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
HTML CSS 一个标签实现带动画的抖音LOGO
常用的文件对应的MIME类型汇总
Apr 26 #HTML / CSS
通过feDisplacementMap和feImage实现水波特效
什么是css原子化,有什么用?
Apr 24 #HTML / CSS
css3 文字断裂效果
You might like
Yii2.0多文件上传实例说明
2017/07/24 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
python 杀死自身进程的实现方法
2019/07/01 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python文件操作方法详解
2020/02/09 Python
django跳转页面传参的实现
2020/09/17 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
vue+django实现下载文件的示例
2021/03/24 Vue.js
五年级英语教学反思
2014/01/31 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
大学生党课感想
2015/08/11 职场文书
React实现动效弹窗组件
2021/06/21 Javascript
简单谈谈Python面向对象的相关知识
2021/06/28 Python