解决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参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 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
网站当前的在线人数
2006/10/09 PHP
?生?D片??C字串
2006/12/06 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php生成随机颜色的方法
2014/11/13 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
python连接oracle数据库实例
2014/10/17 Python
python中argparse模块用法实例详解
2015/06/03 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
企业业务员岗位职责
2014/03/14 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
项目转让协议书
2014/10/27 职场文书
中班下学期个人工作总结
2015/02/12 职场文书