flex 换主轴后子元素占满_Chrome72 嵌套 flex 布局修改,你的网站可能会发生布局错乱...

起源

2019 年 1 月 29 日,Chrome72 正式版(72.0.3626.81)发布,本次发布带来了一个改变,且没有在更新日志中提及,该改变导致某些网站发生了布局错乱。该改变主要针对的是嵌套的flex布局,下面我们一起看下是怎么回事。

问题

首先,我们有一个嵌套的 flex 布局,代码如下:

area
item
content

希望实现这样的效果:父容器 area 有一个指定的高度,且它是一个 flex 弹性盒子,它内部有一个子元素 item,使用 flex:1 指定了占满剩余空间,且 item 也是一个 flex 弹性盒子,它内部还有一个同样占满剩余空间的嵌套子元素 nest-item,通过设置 overflow:auto 让它的内容超出后显示滚动条。效果如下:

ccbf410a98cdfe2320cfdc9241e410fb.png

这样布局的想法很简单,即通过设置弹性盒子子元素的扩展比率,能得到一个自动占满剩余空间高度的容器,再在这个容器中放需要显示的内容,在某些情况下,这确实是一个比较不错的主意,在 Chrome72 之前都是可以正常显示的。但是 Chrome72.0.3626.81中显示如下:

dfda0ea0b72295cbf18b971608f678c7.png

追溯

为什么会出现这样的问题呢?我们看一下规范( https://drafts.csswg.org/css-flexbox/#min-size-auto )flex 弹性盒子主轴上子元素的最小大小是内容的大小(视主轴方向为宽或高)。

那么我们再看一下上面的例子,area 的主轴是纵向的,子元素 item 的最小高度即是内容的高度,而 nest-item 被 content 撑开,content 有一个高度(600px,超出了容器的高度),那么 item 的最小高度也就超过了 600px。这样一来,一层层都是被内容撑开,也就没有出现滚动条了,这样似乎是符合规范预期的。

在 chromium 的 issue 反馈中,有人提到了这个问题( https://bugs.chromium.org/p/chromium/issues/detail?id=927066 ),根据回复,这正是官方为了让 Chrome 更加符合规范行为而做的调整。也就是说,Chrome72 之前的版本,这算是一个没有按照规范行为而出现的 bug。新的调整,其实就是让 flex 弹性盒子的子元素最小高度的默认行为应用 min-height:min-content ,就像官方回复中提到的那样,让子元素作为 flex 弹性盒子时却和普通盒子处理方式不同是会让人困惑的。

解决方法

既然知道了原因,那么如果我们还想使用这样的布局方式,该怎么做呢?

对的,我们给 item 指定一个最小高度,让它不使用默认的行为(即内容的高度),一般我们指定最小高度为0 min-height:0。给 item 加上这个样式后,我们再看一下效果:

b375e18012b28e86230f10bba1bd1db5.png

嗯,已经符合我们的预期了。为了验证规范中提到的对主轴方向的行为,我们修改一下代码,将主轴设置为水平方向试试,代码如下:

area
item
content

效果如下:

9fb21538f197e2b4dcc4fc9781b4541e.png

看来主轴为水平方向时,是符合规范预期行为的(Chrome72 及以前的版本都符合),那么我们给 item 加上一句样式 min-width:0 ,效果如下:

9c52c981ebc347b0af63246092feb0ec.png

嗯,是符合我们预期的。

结语

好了,现在你已经知道是怎么一回事了,可是等等,你说你升级到Chrome72没有发现我说的问题?

那是因为官方注意到这个修改会影响到一些网站的正常显示,因此在 2019 年 2 月 6 日(正是春节假期间)发布的 Chrome72.0.3626.96 中,将这个问题还原回以前的行为了( https://chromium.googlesource.com/chromium/src/+/032ef9666487db1d04b656a095b041de8c6d2b63 )。

官方的意思是为了避免这个修改给某些网站带来的不好的影响,因此预留时间给大家修改,等到Chrome73将会发布这一改变。所以为了未来更好的浏览体验,检查一下你的页面吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/453751.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

路由到另外一个页面_Nextjs使用解读一(项目搭建与路由系统)

文章说明:1. 之前想搭建个人博客,由于学习的是react技术栈,所以就到处搜罗资料学了nextjs,配合koa就把博客搭起来了。该系列文章基于我的学习笔记,重新整理了一遍,如果有错误之处,还请指正。2. …

微信获取token -1000

最终翻看微信开发api找到需要去配置IP白名单。只需要配置访问来源IP即可。 转载于:https://www.cnblogs.com/yangjinqiang/p/8184663.html

产品技术和管理

为啥纯粹为消费者传递体验的活动可以价格不菲,几为暴利?——谈客户体验作为客户价值提升之源 不论产品还是服务,如果能够为消费者传递有益的体验,其价值就可以在一般的产品服务之上得以体现;附加了体验的产品&#xff…

jquery ztree 设置勾选_047 JAVA-jQuery

jQuery操作元素属性的值表单:<body><input type"button" name"" id"but1" value"测试获得属性值" /><hr />账号&#xff1a;<input type"text" name"sxtzh" id"zhanghao" value&q…

Opencv undefined reference to `cv::imread() Ubuntu编译

Ubuntu下编译一个C文件&#xff0c;C源程序中使用了opencv&#xff0c;opencv的安装没有问题&#xff0c;但是在编译的过程中出现如下错误&#xff1a; undefined reference to cv::imread(std::string const&, int)undefined reference to cv::noArray()undefined referen…

深度学习目标检测之 YOLO v1

这是继 RCNN&#xff0c;fast-RCNN 和 faster-RCNN 之后&#xff0c;rbg&#xff08;RossGirshick&#xff09;针对DL目标检测速度问题提出的另外一种框架。YOLO V1 增强版本GPU中能跑45fps&#xff0c;简化版本155fps。 论文名&#xff1a; 《You Only Look Once&#xff1a;…

编程珠玑番外篇

1.Plan 9 的八卦 在 Windows 下喜欢用 FTP 的同学抱怨 Linux 下面没有如 LeapFTP 那样的方便的工具. 在苹果下面用惯了 Cyberduck 的同学可能也会抱怨 Linux 下面使用 FTP 和 SFTP 是一件麻烦的事情. 其实一点都不麻烦, 因为在 LINUX 系统上压根就不需要用 FTP. 为什么呢? 因…

BT下载原理分析

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主允许不得转载。 BitTorrent协议。 BT全名为BitTorrent,是一个p2p软件,你在下载download的同时&#xff0c;也在为其他用户提供上传upload&#xff0c;因为大家是“互相帮助”&#xff0c;所以不会随着用户数的增加而…

表格列求和_excel表格制作,Excel表格的基本操作,包含制作一个表格10方面的知识...

创建表格&#xff0c;插入与删除一行一列或多行多行&#xff0c;一次移动一行一列或多行多列&#xff0c;拆分与合并单元格&#xff0c;单元格内换行&#xff0c;表格求和与求平均值是Excel表格的基本操作&#xff1b;除此之外&#xff0c;Excel表格的基本操作还包括调整行高列…

深度学习之 FPN (Feature Pyramid Networks)

论文题目&#xff1a;Feature Pyramid Networks for Object Detection论文链接&#xff1a;https://arxiv.org/abs/1612.03144论文代码&#xff1a;Caffe版本 https://github.com/unsky/FPN 《Feature Pyramid Networks for Object Detection》这篇论文主要解决的问题是目标检…

ISLR—第二章 Statistical Learning

Statistical Learning Y 和X的关系why estimate f 用来预测 预测的时候可以将f^当成一个black box来用&#xff0c;目的主要是预测对应x时候的y而不关系它们之间的关系。用来推断 推断的时候&#xff0c;f^不能是一个black box&#xff0c;因为我们想知道predictor和response之…

提高编程思想

虚函数和抽象函数有什么区别 虚函数是有代码的并明确允许子类去覆盖&#xff0c;但子类也可不覆盖,就是说可以直接用&#xff0c;不用重写 抽象函数是没有代码&#xff0c;子类继承后一定要重写 ****************************************************************** 在一…

Windows数据库编程接口简介

数据库是计算机中一种专门管理数据资源的系统&#xff0c;目前几乎所有软件都需要与数据库打交道&#xff08;包括操作系统&#xff0c;比如Windows上的注册表其实也是一种数据库&#xff09;&#xff0c;有些软件更是以数据库为核心因此掌握数据库系统的使用方法以及数据库系统…

2019如何转换2010_9102年,你还不知道PPT怎么转换成视频吗?小心落伍了

你在刷抖音的时候有没有刷过这类视频&#xff1a;成为人生赢家必备的书单、5个让你看透人性的电影、6个让你升职加薪的APP...如果你细心观察的话&#xff0c;会发现这类视频的做法基本都是一个样的&#xff0c;像在翻相册一样&#xff0c;一页页过去&#xff0c;所以它们也叫做…

深度学习之RetinaNet

总述 Focal loss主要是为了解决one-stage目标检测中正负样本比例严重失衡的问题。该损失函数降低了大量简单负样本在训练中所占的权重&#xff0c;也可理解为一种困难样本挖掘。 目标识别有两大经典结构: 第一类是以Faster RCNN为代表的两级识别方法&#xff0c;这种结构的第…

python的datetime函数_Python连载8-datetime包函数介绍

一、datetime包(上接连载7内容)1.函数&#xff1a;datetime(1)用法&#xff1a;输入一个日期&#xff0c;来返回一个datetime类?(2)格式&#xff1a;datetime.datetime(年&#xff0c;月&#xff0c;日&#xff0c;hour&#xff0c;minute&#xff0c;second)其中hour,minute,…

深度学习之 soft-NMS

论文&#xff1a;《Improving Object DetectionWith One Line of Code》soft-NMS 英文论文链接&#xff1a;https://arxiv.org/pdf/1704.04503.pdfsoft-NMS github 链接&#xff1a;https://github.com/bharatsingh430/soft-nms 绝大部分目标检测方法&#xff0c;最后都要用到…

一维二维_Excel二维数据转一维,2种方法轻松搞定

今天是2020年1月1日&#xff0c;祝各位小伙伴们新年快乐&#xff0c;开心每一天~如下所示&#xff0c;左边是二维交叉数据表&#xff0c;我们希望快速转换成右边的一维数据表如果复制粘贴&#xff0c;效率太低了&#xff0c;今天分享两种方法&#xff0c;实现快速转换1、powerq…

深度学习之 Cascade R-CNN

Zhaowei Cai, Nuno Vasconcelos. 《Cascade R-CNN: Delving into High Quality Object Detection》. CVPR 2018.论文链接&#xff1a;https://arxiv.org/abs/1712.00726代码链接&#xff1a;https://github.com/zhaoweicai/cascade-rcnn 前言 IOU阈值被用来定义正负例&#x…

转换文档参数_明明2秒可以搞定Word、Excel相互转换,你却用了半小时!真亏了...

我们在用office三件套工作的时候&#xff0c;经常都需要对文件的格式进行转换&#xff0c;像是Word文档和Excel表格的转换&#xff0c;很多小伙伴都要花上半个小时甚至以上的时间才能搞定&#xff0c;效率实在不行。别担心&#xff0c;今天小编将分享能快速完成Word、Excel转换…