overflow_auto在flex_1的容器失效
旧文章从语雀迁移过来，原日期为2022-02-22
我们经常使用flex:1来动态分配父容器剩余空间，这时候如果要在容器上增加滚动条，使用overflow: auto可能会失效。
原因：
一般原因：因为容器所在的父容器采用了默认样式overflow: visible，即允许内容溢出到父容器外，那么就会对使用flex: 1的容器没有给到一个固定的高度，所以我们针对这种情况，只需要在父容器添加overflow: auto来让父容器创建BFC，让内容不会溢出。
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.parent1 {
height: 80px;
background: red;
}
.parent2 {
flex: 1;
display: flex;
flex-direction: column;
/* 父容器创建BFC，一般使用overflow:auto */
overflow: auto;
}
.child1 {
height: 80px;
background: green;
}
.child2 {
flex: 1;
overflow: auto;
background: greenyellow;
}
.child2-sub {
height: 1000px;
width: 100px;
background: orange;
}
</style>
<body>
<div class="container">
<div class="parent1"></div>
<div class="parent2">
<div class="child1"></div>
<div class="child2">
<div class="child2-sub"></div>
</div>
</div>
</div>
</body>
</html>
overflow_auto在flex_1的容器失效的更多相关文章
- k8s集群Job Pod 容器可能因为多种原因失效，想要更加稳定的使用Job负载，有哪些需要注意的地方？
k8s集群Job Pod 容器可能因为多种原因失效,想要更加稳定的使用Job负载,有哪些需要注意的地方? 面试官:"计数性Job默认完成模式是什么?Indexed模式如何发布自定义索引呢?& ...
- 容器技术研究-Kubernetes基本概念
最近在研究容器技术,作为入门,基本概念必须搞明白,今天整理一下Kubernetes的基本概念. 一.什么是Kubernetes Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部 ...
- Kubernetes容器集群管理环境 - 完整部署（上篇）
Kubernetes(通常称为"K8S")是Google开源的容器集群管理系统.其设计目标是在主机集群之间提供一个能够自动化部署.可拓展.应用容器可运营的平台.Kubernetes ...
- Kubernetes+Docker+Istio 容器云实践
随着社会的进步与技术的发展,人们对资源的高效利用有了更为迫切的需求.近年来,互联网.移动互联网的高速发展与成熟,大应用的微服务化也引起了企业的热情关注,而基于Kubernetes+Docker的容器云 ...
- Hadoop官方文档翻译——YARN Architecture（2.7.3）
The fundamental idea of YARN is to split up the functionalities of resource management and job sched ...
- java中的重绘
void java.awt.Container.validate()Validates this container and all of its subcomponents.这个函数更新容器及其全部 ...
- java集群技术(转)
来源:http://blog.csdn.net/cdh1213/article/details/21443239 序言 越来越多的关键应用运行在J2EE(Java2, Enterprise Editi ...
- 2015第44周五Java集群技术（转）
从http://blog.csdn.net/cdh1213/article/details/21443239上看到这篇文章,感觉很不错,找好久没找到中文出处,最早看是从http://www.these ...
- 深入了解java集群技术
原文源自:http://blog.csdn.net/happyangelling/article/details/6413584 序言 越来越多的关键应用运行在J2EE(Java 2, Enterpr ...
- java集群
java集群 分类: java学习2011-05-12 09:12 7531人阅读 评论(9) 收藏 举报 java服务器负载均衡ejb集群数据库 序言 越来越多的关键应用运行在J2EE(Java 2 ...
随机推荐
- 【JavaScript排序】 sort()方法（解决null、undefined、0之间的排序（混乱）问题）
JavaScript排序 - sort()方法 --解决null.undefined.0之间的排序(混乱)问题 一.普通的数组排序 JavaScript中用方法sort()为数组排序.sort() ...
- Linux基础_3_文件/文件夹权限管理
注:权限遮罩码: 控制用户创建文件和文件夹的默认安全设置,文件默认权限为666-umask的值,文件夹默认权限为777-umask的值. root默认0022,普通用户默认0002. 文件的默认权限不 ...
- SQL语句编写的练习（MySQL）
SQL语句编写的练习(MySQL) 一.建表 1.学生表(Student) 学号 | 姓名 | 性别 | 出生年月 | 所在班级 create table Student( sno varchar(2 ...
- 动态搜索图书：可以按书名、作者、出版社以及价格范围进行搜索。（在IDEA中mybatis）
中午找了好久.好多人写的都驴头不对马嘴.自己实现后.才发现是真的不麻烦.也不知道人家咋想的.写的死麻烦还没用.老是搜出sql语句写死的.我要的是动态滴.自己写出后.总结了一下 1.按照书名.作者.出版 ...
- faker
faker是一个生成伪造数据的Python第三方库,可以伪造城市,姓名,文班等各自信息,而且支持中文 安装 pip3 install faker 使用 # 导包 from faker impo ...
- 快读《ASP.NET Core技术内幕与项目实战》EFCore2.5：集合查询原理揭秘（IQueryable和IEnumerable）
本节内容,涉及4.6(P116-P130).主要NuGet包:如前述章节 一.LINQ和EFCore的集合查询扩展方法的区别 1.LINQ和EFCore中的集合查询扩展方法,虽然命名和使用完全一样,都 ...
- spring源码解析(二) 结合源码聊聊FactoryBean
一.什么是FactoryBean FactoryBean是由spring提供的用来让用户可以自定bean创建的接口:实现该接口可以让你的bean不用经过spring复杂的bean创建过程,但同时也能做 ...
- 第2-3-1章 文件存储服务系统-nginx/fastDFS/minio/阿里云oss/七牛云oss
目录 文件存储服务 1. 需求背景 2. 核心功能 3. 存储策略 3.1 本地存储 3.2 FastDFS存储 3.3 云存储 3.4 minio 4. 技术设计 文件存储服务 全套代码及资料全部完 ...
- Linux Framebuffer 实验
一.准备 linux虚拟机或ARM开发板 Ubuntu18.04 二.Framebuffer介绍 次笔记主要的目的是实验,所以我不介绍了,有需要的小伙伴可以去看下面博客 Linux LCD Framb ...
- 如何使用虚拟机下载和安装Centos
首先先下载虚拟机进行安装我这里使用的是 VMware Workstation Player 当前版本为16.这个是免费使用的可以不需要许可证就能长期使用了 官网VMware Workstation P ...