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 ...
随机推荐
- POJ1185 [NOI2001] 炮兵阵地 （状压DP）
又是一道有合法性检测的状压题. dp[i][j][k]表示第i行状态为j,i-1行状态为k时前i行放置的最大数量. 注意22行统计二进制数中1的个数时的巧妙方法. 1 #include<cstd ...
- Golang可能会踩的58个坑之初级篇
前言 Go 是一门简单有趣的编程语言,与其他语言一样,在使用时不免会遇到很多坑,不过它们大多不是 Go 本身的设计缺陷.如果你刚从其他语言转到 Go,那这篇文章里的坑多半会踩到. 如果花时间学习官方 ...
- Maven中POM文件总体配置说明
POM文件总体配置说明 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://w ...
- LOJ2324「清华集训 2017」小Y和二叉树
题目链接 瞎jb贪一发就过了.首先度数<=2且编号最小的点一定是中序遍历最靠前的点,我们从这个点开始dfs一遍算出子树中度数<=2且编号最小的点记为\(f(i)\),然后从这个点开始一步一 ...
- MVVM视图模型
- [WPF] 抄抄超强的苹果官网滚动文字特效实现
1. 前言 今天 ChokCoco 大佬发布了一篇博客 超强的苹果官网滚动文字特效实现,iPhone 我是买不起的,但不妨碍我对抄特效感兴趣,正好我这周安排的工作已经完成了,于是有空练练手实现了一个 ...
- docker swarm快速部署redis分布式集群
环境准备 四台虚拟机 192.168.2.38(管理节点) 192.168.2.81(工作节点) 192.168.2.100(工作节点) 192.168.2.102(工作节点) 时间同步 每台机器都执 ...
- 京东云开发者｜IoT运维 - 如何部署一套高可用K8S集群
环境 准备工作 配置ansible(deploy 主机执行) # ssh-keygen # for i in 192.168.3.{21..28}; do ssh-copy-id -i ~/.ssh/ ...
- Codeforces Round #832 (Div. 2) A-D
比赛链接 A 题解 知识点:贪心. 我们考虑把正数和负数分开放,显然把负数和正数放在一起的结果不会更优. 时间复杂度 \(O(n)\) 空间复杂度 \(O(1)\) 代码 #include <b ...
- 【笔记】CF1607F Robot on the Board 2 及相关
题目传送门 记忆化搜索 首先,这题 \(10000\) 组 \(2000\times 2000\) 的数据直接爆搜肯定会超时.想到,如果一个点的答案已经被更新过,之后走到这个点能再多走的点也就确定了, ...