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 ...
随机推荐
- C#-2 C#程序
一 C#程序是一组类型声明 C#程序或DLL的源代码是一组一种或多种类型声明. 对于可执行程序,类型声明中必须有一个包含Main方法的类. 命名空间是一种把相关的类型声明分组并命名的方法.是类在程序集 ...
- Libgdx游戏开发(2)——接水滴游戏实现
原文:Libgdx游戏开发(2)--接水滴游戏实现 - Stars-One的杂货小窝 本文使用Kotlin语言开发 通过本文的学习可以初步了解以下基础知识的使用: Basic file access ...
- 关于pwd命令小技巧-确认当前工作目录的绝对路径中是否包含软链接目录名
Linux中任何一个命令,当你用心研究到深处时,也许总能有着新的发现或者有趣的用途,如下方的pwd命令 对于pwd命令,大家都知道是用于打印当前的工作目录路径,而且是绝对路径 pwd命令两个选项的,默 ...
- mac通过docker一键部署Nexus3
目录 mac通过docker一键部署Nexus3 一.前言 二.系统配置 三.安装步骤 1.Dockerhub查看镜像地址 2.一键安装 2.1.克隆脚本 2.2.安装程序 2.2.1.程序安装详情 ...
- virtualbox的Linux虚拟磁盘大小调整及注意事项
virtualBox 调整磁盘分区 起因 起初安装centos6.3 时,没有修改默认的硬盘空间.只有8G,导致后面安装完zookeeper,jdk之后,在安装mysql发现磁盘空间不足 扩容步骤 1 ...
- DevOps｜高效能敏捷交付组织：特性团队(FeatureTeam)+Scrum
这是<研发效能组织能力建设>的第三篇.特性团队和Scrum,这两个定义我们在之前的文章中都详细介绍了.这两个组织模式或者说管理实践,我都用过所以有些时候特别有感触.书本上纯粹的模式很容易理 ...
- 编写一个jsp页面，利用Scriptlet编写一段计算代码，要求用零作为除数，并使用page指令将错误信息显示在另外一个jsp页面，产生的错误信息为“错误，不能用0做除数”
文章目录 1.测试结果: 2.结果计算页面 3.错误处理页面 1.测试结果: 2.结果计算页面 <%@ page language="java" contentType=&q ...
- C++算法之旅、02 从木棒切割问题领悟二分法精髓
172.木棒切割问题 https://sunnywhy.com/problem/172 题目描述 给出n根木棒的长度,现在希望通过切割它们来得到至少k段长度相等的木棒(长度必须是整数),问这些长度相等 ...
- 一、Go语言开篇介绍
Go语言开篇介绍 Go语言 是Google公司 在2007开发一种静态强类型.编译型语言,并在 2009 年正式对外发布. Go语言以其近C的执行性能和近解析型语言的开发效率,以及近乎于完美的编译速度 ...
- （数据科学学习手札146）geopandas中拓扑非法问题的发现、诊断与修复
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,geopandas作为在Pyt ...