css flex 子元素溢出时,父元素被撑开解决方案

当父元素使用flex: 1;自适应填满时,子元素内容溢出,父元素内容撑大,导致页面显示问题,或设置了overflow 为scroll 的元素没出现滚动条等问题

解决方案:

1.如果是横向排列,flex: 1;的元素加上width: 0; 此时会限制自适应的父元素不会溢出。

2.同上,如果是纵向排列,flex: 1;的元素是高度铺满的,那就加上height: 0; 则元素高度自适应的同事,高度不会被撑大。

3.无论多少层子元素,只要不想给限制的宽高,想让元素flex:1;自适应宽高,都一层层给flex为1时的元素 宽或高 为0限制下去。可以用于解决子元素溢出问题。父元素不会撑大后,给想出现scroll的元素这只滚动,则滚动条恢复正常。

.box{display: flex;
}// 没有给宽度的元素
.aside{}// 宽度自适应的元素
.main{width: 0; // 加上这个,该元素会自适应的同时,不会被main的子元素撑大宽度flex: 1;overflow-x: scroll;  // 由于不会被撑大,所以可以横向滚动
}/** 或 */.box{display: flex;flex-direction: column;}// 没有给高度的元素
.top{}// 高度自适应的元素
.main{height: 0;  // 加上这个,该元素会自适应的同时,不会被main的子元素撑出高度flex: 1;overflow-y: scroll;  // 由于不会被撑高,所以可以竖向滚动
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/39602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

调整分区失败致盘无法访问:深度解析与数据恢复全攻略

调整分区失败盘打不开的困境 在计算机的日常维护与管理中,调整磁盘分区是常见的操作之一,旨在优化存储空间布局、提升系统性能或满足特定应用需求。然而,当这一操作未能如预期般顺利进行,反而导致分区调整失败,进而使…

模拟算法系列|替换所有的问号|提莫攻击|种花问题|Z字形变换|兼具大小写的英文字母|删除字符使频率相同

大家好,我是LvZi,今天带来模拟算法系列|替换所有的问号|提莫攻击|种花问题|Z字形变换|兼具大小写的英文字母|删除字符使频率相同 一.基本概念 模拟算法就是根据题意 模拟出代码的过程,模拟算法的题意往往都很简单,考验的是将思路转化为代码的能力,十分的锻炼代码能力,且能很好…

【日记】在街上跳舞被同事看见了(470 字)

正文 昨晚跳舞,照例在街上表演,被单位里的保洁阿姨撞见了…… 我以为这就完了,结果她还拍了视频发给做饭阿姨。晚上吃饭无意间聊起才知道有这回事。我竟一时间不知该哭还是该笑……. 今天非常非常闲。虽然不是没工作,只是我懒得去…

pdf转图片

前提 环境ubuntu22.04 lts,windows没有测试过。 今天想用wps pdf转换一下为图片,发现要收费!!!!为了省钱,只好撸代码了。说实话,这年头赚钱真的不容易,特别是程序员,但是我是一个运维也算半个程序员。 pip install pdf2image sudo apt-get install poppler-utils代…

418天内第6次发布,科大讯飞星火大模型在跟谁赛跑?

常言道“一步慢,步步慢”,大模型市场瞬息万变,快人一步就是竞争的反转。 6月27日,科大讯飞如期公布星火大模型的最新进展:大模型底座七大核心能力得到全面提升,星火大模型V4.0可对标GPT-4 Turbo&#xff0…

C# Opacity 不透明度

WinForms Opacity以下是一些使用 Opacity 属性的示例:设置窗体的透明度:设置按钮的透明度:动态改变控件的透明度:使用定时器改变透明度:在窗体加载时设置透明度: 请注意另外 WPF Opacity以下是一些使用 Opa…

软考系统架构师高效备考方法论

软考系统架构师高效备考方法论 本章总结的备考方法论也是希望能帮助更多的小伙伴高效的备考最终通过考试,这种考试个人感觉是尽量一次性考过, 要不然老拖着,虽然每年可以考两次,5月和11月,两次考试间隔5个月时间&#…

ELK日志实时监控

目录 一、ELK/EFK简介 1.1 什么是ELK/EFK? 1.2 常见架构 1、Elasticsearch Logstash Kibana 2、Elasticsearch Logstash Filebeat Kibana 3、Elasticsearch Logstash Filebeat Kibana Redis 4、Elasticsearch Fluentd Filebeat Kibana 1.3 基本流程 二、…

JVM专题之垃圾收集算法

标记清除算法 第一步:标记 (找出内存中需要回收的对象,并且把它们标记出来) 第二步:清除 (清除掉被标记需要回收的对象,释放出对应的内存空间) 缺点: 标记清除之后会产生大量不连续的内存碎片,空间碎片太多可能会导致以后在程序运行过程中需 要分配较大对象时,无法找到…

反射--通俗易懂

一、反射(Reflection) 反射就是:加载类,并允许以编程的方式解剖类中的各种成分(成员变量、方法、构造器等) 动态语言,是一类在运行时可以改变其结构的语言:例如新的函数、对象、甚至代码可以被引进,已有的函数可以被删除或是其他…

多重奖励拿到手软,OPENAIGC开发者大赛燃爆这个夏天!

你是否渴望在AI领域一展身手? 你是否拥有开创性的技术和创意? 2024 OPENAIGC开发者大赛就是你的最佳舞台! 不论你是经验丰富的开发者, 还是技术领域的创新者, 都有机会在这里大放异彩! 由联想拯救者、…

每日一题 7月1日

1 设数组data[m]作为循环队列的存储空间,front为队头指针,rear为队尾指针,则执行出队操作后其头指针front值为____ 2 采用滑动窗口机制对两个相邻结点A(发送方)和B(接收方)的通信过程进行流量控制。假定帧的序号长度为3比特,发送窗口与接收窗口的大小均为7,当A发送了…

分析Profiler Timeline中的算子序列,通过寻找频繁项集的办法,得到TOPK可融合的算子序列

分析Profiler Timeline中的算子序列,通过寻找频繁项集的办法,得到TOPK可融合的算子序列 1.相关链接2.代码【仅分析带通信算子的Pattern】3.在实际工程中发现 [all_gather, matrix_mm_out]频率最高4.[Ascend MC2](https://gitee.com/ascend/MindSpeed/blob/master/docs/features…

1:25万基础电子地图(西藏版)

我们为你分享过四川版、云南版、江西版、贵州版、重庆版和青海版的1比25万基础电子地图,现在再为你分享西藏版的电子地图。 如果你需要西藏版的1比25万基础电子地图,你可以在文末查看该数据的领取方法。 基础电子地图西藏版 西藏版1:25万基础电子地图…

go框架gin自定义和增强*gin.Context的方法 --使用闭包函数将自定义Context handler转换为 gin.HandlerFunc

在使用gin框架进行开发的时候,我们可以通过自定义gin.Context来实现和增强gin框架,方法也很简单,关键就2个步骤, 1是继承gin.Context, 2是在路由的时候对函数入参类型进行转换,下面为具体的方法&#xff1a…

压缩pdf文件大小,压缩pdf文件大小软件哪个好

在数字化时代,PDF文件因其卓越的跨平台兼容性和稳定性而成为工作与学习的好帮手。然而,当PDF文件体积过大时,传输和存储便成了一项挑战。别担心,本文将为你揭秘如何快速压缩PDF文件,让你的文档轻装上路! 压…

postman请求访问:认证失败,无法访问系统资源

1、使用postman时,没有传入相应的token,就会出现这种情况,此时需要把token放进去 发现问题: { "msg": "请求访问:/getInfo,认证失败,无法访问系统资源", "code": 401 } 1…

从美图类场景,看火山引擎数据飞轮如何赋能产品增长

伴随移动移动互联网发展以及手机拍摄能力提升,美图类APP已成为人们手机中常见的应用之一。根据广发证券发展研究中心《数字媒体行业AI系列报告:美图类APP,商业模式逐渐清晰,AIGC加速付费心智培养》显示,从行业整体流量…

Python中序列化利器pickle使用详解

✨前言: 🌟什么是pickle? Python 中的 pickle 模块是一个序列化和反序列化Python对象结构的工具,也就是说它可以把Python中任意一个对象转化为一串字节流,也可以将这串字节流重新恢复为原来的对象。这个过程也分别被…

Monorepo(单体仓库)与 MultiRepo(多仓库): Monorepo 单体仓库开发策略与实践指南

🔥 个人主页:空白诗 文章目录 一、引言1. Monorepo 和 MultiRepo 简介2. 为什么选择 Monorepo? 二、Monorepo 和 MultiRepo 的区别1. 定义和概述2. 各自的优点和缺点3. 适用场景 三、Monorepo 的开发策略1. 版本控制2. 依赖管理3. 构建和发布…