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 ...
随机推荐
- Allure的简单使用
Allure的简单使用 1.Allure简介 简单的理解下,可以把Allure当成一个用于生成美观测试报告的开源工具,配合Pytest测试框架使用更佳. 也就是说,Allure是在Pytest执行测试 ...
- 学习ASP.NET Core Blazor编程系列五——列表页面
学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应用程序(上) 学习ASP.NET Core Blazor编程系 ...
- Docker | 容器数据卷详解
什么是容器数据卷 从docker的理念说起,docker将应用和环境打包成一个镜像,运行镜像(生成容器)就可以访问服务了. 如果数据都存在容器中,那么删除容器,数据就会丢失!需求:数据可以持久化 My ...
- Charles的安装与使用
Charles是一款抓包工具,可以用来截取和发送手机APP上的各种请求 在windows上安装Charles,确保手机和电脑在同一个WIFI下,加上一些配置,就可以抓取手机上的APP请求 有能力的同学 ...
- Hadoop生态系统—数据仓库Hive的安装
一.数据仓库 数据仓库是一个面向主题的.集成的.随时间变化,但信息本身相对稳定的数据集合,相比于传统型数据库,它主要用于支持企业或组织的决策分析处理.主要有以下3个特点: 数据仓库是面向主题的: 数据 ...
- NOI2011阿狸的打字机
题目链接 昨天晚上yy出了一个做法后,感觉...好难打啊...,于是先回去休息.今天来打时,还是感觉细节好多,于是就打了两个小时.打完过了编译后,居然过了样例,直接交,尼玛居然过了???......还 ...
- 对于python中“FileNotFoundError: [Errno 2] No such file or directory”的解决办法
在我们使用vscode运行Python代码时遇到的情况 一.出现原因:这里是由于Vscode中,python里的路径是相对与工作目录来进行定位的.所以在多级目录情况下,若不设置绝对路径,往往找不到相应 ...
- JAVA语言学习-面向对象(1)
类与对象 类 类是JAVA语言中重要的复合型数据类型().类的实现包括两个部分:成员变量和成员方法("方法"可以看作是C语言中的函数) 类的声明 要使用类,首先得对其声明.声明一个 ...
- python 类相关 下划线相关 __init__
类 1.静态方法 class C(object): @staticmethod def f(): print('runoob'); C.f(); # 静态方法无需实例化 cobj = C() cobj ...
- 使用SVN搭建本地版本控制仓库
使用SVN搭载本地版本控制仓库[转] 如果是在公司,都是有云服务器,项目负责人都是把项目放在服务器上,我们直接用SVN地址就可以实现更新和下载项目源码,那么如果我们自己想使用SVN在本机管理自己写的一 ...