解决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实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
一款纯css3实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php 常用类汇总 推荐收藏
2010/05/13 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
jQuery搜索同辈元素方法
2015/02/10 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
高效使用Python字典的清单
2018/04/04 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python实现登陆文件验证方法
2018/10/06 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
python3中数组逆序输出方法
2020/12/01 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
公休请假条
2014/04/11 职场文书
土地租赁意向书
2014/07/30 职场文书
付款承诺函范文
2015/01/21 职场文书
财务经理岗位职责
2015/01/31 职场文书
建党伟业电影观后感
2015/06/01 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis