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

即有一个固定高度的外部容器，顶部的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限制的问题的更多相关文章

  1. CSS3 Flex布局（项目）

    一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...

  2. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

  3. FreeMusic项目优化（一）——flex布局学习记录

    参考博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html flex布局是w3c于09年提出的,用于简便,整洁,响应式地解决布局问题的手 ...

  4. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  5. flex布局学习总结

    最近项目主要是小程序,小程序里面的布局主要采用flex布局,之前对flex 布局只是稍作了解,总结下flex 布局的常用套路 容器 Flex是Flexible Box的缩写,意为"弹性布局& ...

  6. 微信小程序之Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  7. 深入理解 flex 布局以及计算_Flexbox, Layout

    起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...

  8. flex布局中flex-grow与flex-shrink的计算方式

    CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...

  9. Flex布局语法与实践

    一.参考文献 阮一峰 Flex布局的语法 阮一峰 Flex布局的实践 二.Flex语法 (一)Flex是什么 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状 ...

  10. CSS 学习笔记 - Flex 布局

    传统布局方式的局限性 传统的网页布局方式,采用 display + position + float 的方式来实现.这种方式,无法实现一些复杂的布局,并且在实现某些布局时,会有一些局限性. 比如,最常 ...

随机推荐

  1. DTSE Tech Talk | 云原生架构下的数字身份治理实践

    摘要:由华为技术大咖VS派拉软件CTO为大家详解云原生架构下的身份管理平台,构建云安全数字身份入口. 本文分享自华为云社区<DTSE Tech Talk | 第4期:云原生架构下的数字身份治理实 ...

  2. 揭秘华为云GaussDB(for Influx)：最佳实践之数据建模

    摘要:本期将从GaussDB(for Influx)数据模型谈起,分享GaussDB(for Influx)数据建模的最佳方法,避免一些使用过程中的常见问题. 本文分享自华为云社区<华为云Gau ...

  3. 火山引擎云原生数据仓库 ByteHouse 技术白皮书 V1.0（上）

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 近日,<火山引擎云原生数据仓库 ByteHouse 技术白皮书>正式发布.白皮书简述了 ByteHou ...

  4. 高性能 Jsonpath 框架，Snack3 3.2.57 发布

    Snack3,一个高性能的 JsonPath 框架 借鉴了 Javascript 所有变量由 var 申明,及 Xml dom 一切都是 Node 的设计.其下一切数据都以ONode表示,ONode也 ...

  5. 基于C++11特性的线程池

    写在前面:本文学习自基于C++11实现线程池,代码部分均属于该博主,自己只是想记录以下自己的认知,并以这种方式加深一下自己对于多线程的理解 1 前置知识 RAII管理机制 简单来说RAII机制是一种对 ...

  6. BP 供应商创建与修改

    1业务场景 BP中,供应商和客户的创建发生了很大变化,之前的BAPI无法使用,本文档采用新的方法创建供应商. 2创建 2.1业务伙伴 2.2添加BP角色 2.3维护银行数据 2.4维护类别税号数据 2 ...

  7. luoguP1419 寻找段落(二分答案+单调队列）单调队列DP求在区间[l,r] 中长度至少为 m 的最大平均值

    模板:单调队列DP求在区间\([l,r]\) 中长度至少为 \(m\) 的最大平均值 题目链接:Here 题意 给定一个长度为 \(n\) 的序列 \(a_1\) ~ \(a_n\) ,从中选取一段长 ...

  8. Codeforces Round #717 (Div. 2) 个人题解 Ａ～C （A思維，B位運算，C背包DP）

    1516A. Tit for Tat 題意: 給定大小為 \(n\) 的數組和可操作次數 \(k\) , 每次操作都選定兩個數(如果 \(1 \le a_i\) ),使第一個數 - \(1\) ,另一 ...

  9. 神秘又强大的@SpringBootApplication注解

    一.前言 大部分的配置都可以用Java类+注解来代替,而在SpringBoot项目中见的最多的莫过于@SpringBootApplication注解了,它在每个SpringBoot的启动类上都有标注. ...

  10. OpenSCA受邀出席2023 Open Compliance Summit

    近日,由Linux基金会主办的2023 Open Compliance Summit(开放合规峰会,简称OCS)在日本东京隆重召开.悬镜安全旗下全球极客开源数字供应链安全社区OpenSCA受邀参与,O ...