记一次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>
但最终效果确实如此：
很明显body的高度并没有被限制，实际的高度是子元素的内容高度。
So why? 用搜索引擎搜了许久没找到理想的答案，这种问题确实也很难以表述。我现在真正想知道的是：为什么我给flex布局中的子项目设置了flex-shrink: 1，但它却没按我预期的表现呢。网络上相关的资料都仅仅告知如使用的，对于我想知道的，最适合的资料应该是翻flex这块的实现标准。
依据https://www.w3.org/TR/css-flexbox-1/#min-size-auto一节中的描述，首先是这么句话：
Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties.
可知弹性项目的min-width和min-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变为滚动容器，即设置overflow为scroll、auto或者hidden（没错hidden属性也是，因为hidden只是隐藏溢出的内容不提供滚动条，但仍然可以通过js控制里边的内容来达到滚动效果，所以该情况也是滚动容器）。另一种方式是我们可以直接覆盖min-height的默认值，即显示设置min-height: 0 也能达到目的。
记一次flex布局中子项目尺寸不受flex-shrink限制的问题的更多相关文章
- CSS3 Flex布局（项目）
一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...
- CSS3 Flex布局整理(三)-项目属性
一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...
- FreeMusic项目优化（一）——flex布局学习记录
参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- flex布局学习总结
最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路 容器 Flex是Flexible Box的缩写,意为"弹性布局& ...
- 微信小程序之Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 深入理解 flex 布局以及计算_Flexbox, Layout
起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...
- flex布局中flex-grow与flex-shrink的计算方式
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...
- Flex布局语法与实践
一.参考文献 阮一峰 Flex布局的语法 阮一峰 Flex布局的实践 二.Flex语法 (一)Flex是什么 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状 ...
- CSS 学习笔记 - Flex 布局
传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...
随机推荐
- 应用传送网络(ADN)：率先架起“东数西算”的“高速公路”
摘要:云原生ADN网络的未来,是公有云Internet接入降成本的手段,以及对自建光纤骨干网的补充,有力地支撑 "东数西算"国家新基建布局. 本文分享自华为云社区<华为云顾炯 ...
- 详解CNN实现中文文本分类过程
摘要:本文主要讲解CNN实现中文文本分类的过程,并与贝叶斯.决策树.逻辑回归.随机森林.KNN.SVM等分类算法进行对比. 本文分享自华为云社区<[Python人工智能] 二十一.Word2Ve ...
- 最高提升10倍性能！揭秘火山引擎ByteHouse查询优化器实现方案
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 作为企业级数据库的核心组件之一,查询优化器的地位不可忽视.对于众多依赖数据分析的现代企业来说,一个强大且完善 ...
- 火山引擎数智平台 VeDI 帮助智能投影仪更懂用户需求
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 当露营成为年轻人的一种全新生活方式后,连带着户外野营帐篷.可折叠桌椅.卡式炉.多人趣味桌游等露营周边市场都迎来新一 ...
- PPT 图片框架排版万能能公式
图片作用 提升设计感 辅助表达 传递情感 如何选择一张高大上的图片? 星空.地球.城市.海洋.线条.粒子.山脉.壁纸(系统.手机厂商千挑万选的) https://cn.bing.com/images ...
- Mac 配置 OpenCV C++ 版本
今天紀錄一下如何在 Mac 上安裝 OpenCV for C++ 開發環境 使用 Brew 安装,pkgconfig 检测,2023.5.17 Mac x86 ( Intel ) , Mac M1 ( ...
- 4.0 《数据库系统概论》数据库安全性详解---（存取控制、DAC&MAC、视图机制、审计Audit....）
前言 本篇文章学习书籍:<数据库系统概论>第5版 王珊 萨师煊编著 视频资源来自:数据库系统概论完整版(基础篇+高级篇+新技术篇) 由于 BitHachi 学长已经系统的整理过本书了,我在 ...
- Function--jdk8用法
Lambda表达式.首先是参数部分,接着是->,可以视为产出,->之后的内容都是方法体. 当只有一个参数时,可以不需要括号(): 正常情况使用()包裹参数,为了保持一致性,也可以使用括号( ...
- vue tabBar导航栏设计实现5-最终版本
系列导航 一.vue tabBar导航栏设计实现1-初步设计 二.vue tabBar导航栏设计实现2-抽取tab-bar 三.vue tabBar导航栏设计实现3-进一步抽取tab-item 四.v ...
- Vue3.0 + Element Plus整合实战
mall-vue3-manage 基于vue3.0 + Element Plus. 整合最新的 Echarts5 强劲的渲染引擎.富文本编辑器 Wangeditor 的后端管理项目. 版本 vue 3 ...