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 ...
随机推荐
- PHP全栈开发（八）：CSS Ⅶ 表格 style
表格默认是没有边框的,因此,我们在设置表格格式的时候,首先要设置的是表格边框的样式,也就是 table{ border-style:solid; } 设置完表格表格的样式之后,可以设置表格边框的粗细程 ...
- 220726 T3 最优化问题 （树状数组）
题目描述 在同学们的努力下, 高匀感受到了 alb 的快乐. 高勺意犹未尽,找来了一个长度为 nn 的序列 a_1,a_2,-.,a_na1,a2,-.,an . 她想要删除这个序列中的 kk ...
- 利用Java集合实现学生信息的”增删查“
之前学了Java中的集合,打算写一个小程序来消化一下! 那么我们知道,集合相比数组的优点就是可以动态的增加元素,这对比数组来说,十分的便捷: 并且集合为我们封装好一些方法,可以更好的做一些数据操作! ...
- esp-idf 移植 lvgl8.3.3
一.准备材料 开发板:esp32s3 idf版本:4.4.2 lvgl:8.3.3 注意:lvgl不要选择master分支,编译失败时不好确定问题. 二.创建idf项目 方式一 通过 VSCode 创 ...
- MatrixOne从入门到实战04——MatrixOne的连接和建表
MatrixOne从入门到实战--MatrixOne的连接和建表 前景回顾 前几篇文章,为大家介绍了MatrixOne这个产品,以及编译.部署MatrixOne的服务. 直通车: MatrixOne从 ...
- Bug改不完，迭代总延期，咋办？
摘要:本文从流程上需要改进的地方进行讨论,分四个方面来分析产生这个问题的原因. 本文分享自华为云社区<Bug改不完,迭代总延期,咋办?>,作者: 华为云PaaS服务小智. 前言 随着互联网 ...
- 达梦dba_segments指定表名查询到的大小都包含哪些数据
一.结论 dba_segments指定表名查询到的段大小包含索引.约束.表字段数据(包含LOB字段)(1)表(不包含LOB字段)创建默认分配2个簇,1个簇用于存放表结构及字段数据,1个簇用于存放clu ...
- 第一个微信小程序的初始化过程、小程序微信开发平台的下载、如何注册一个微信小程序的账号
文章目录 1.注册微信小程序账号 1.1 小程序的注册流程 1.2 登录小程序账号 2.下载微信小程序开发者平台 3.新建一个小程序 3.1 点击加号 3.2 填写项目目录和小程序ID 3.3 点击确 ...
- 5.@pytest.mark.parametrize()数据驱动
简介: pytest.mark.parametrize 是 pytest 的内置装饰器,它允许你在 function 或者 class 上定义多组参数和 fixture 来实现数据驱动. @pytes ...
- 怎么实现无痛刷新token
最近遇到这个需求,前端登录后,后端返回 access_token 和 refresh_token ,当token 过期时用旧的 refresh_token 去获取新的token,前端要不痛去刷新to ...