当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (css 样式问题)

server/2025/1/17 21:43:00/

一、问题
遇到个样式问题,当父级元素设置了flex 布局 ,两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 (拖拽浏览器 使页面变小)

二、解决方法

	.father{min-height: 600px;width: 100%;display: flex;gap: 12px;&-left {flex: 1;min-width: 0; // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出max-width: calc(50% - 6px); // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出}&-right {flex: 1;min-width: 0; // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出max-width: calc(50% - 6px); // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出}}

http://www.ppmy.cn/server/159187.html

相关文章

【Leetcode 热题 100】215. 数组中的第K个最大元素

问题背景 给定整数数组 n u m s nums nums 和整数 k k k,请返回数组中第 k k k 个最大的元素。 请注意,你需要找的是数组排序后的第 k k k 个最大的元素,而不是第 k k k 个不同的元素。 你必须设计并实现时间复杂度为 O ( n ) O(n) O(…

如何发布自己的第一个Chrome扩展程序

如何发布自己的Chrome扩展程序 只需要六步即可完成Chrome扩展程序的发布 (1)首先打开google chrome 应用商城注册开发者账号的页面 (2)现在进行一个绑卡支付5美元的一次性注册费用即可。【不知道如何绑卡的支付的,文…

YOLOv8改进,YOLOv8检测头融合RFAConv卷积,并添加小目标检测层(四头检测),适合目标检测、分割等

摘要 空间注意力已广泛应用于提升卷积神经网络(CNN)的性能,但它存在一定的局限性。作者提出了一个新的视角,认为空间注意力机制本质上解决了卷积核参数共享的问题。然而,空间注意力生成的注意力图信息对于大尺寸卷积核来说是不足够的。因此,提出了一种新型的注意力机制—…

Docker+Jenkins+Tomcat(保姆级教学)

为了防止文档发了没人看,我在文档里偷偷埋了几个雷 ? 1、简介 什么是持续集成( Continuous integration )? 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员至少集成一 次…

Rust 零大小类型(ZST)

在 Rust 中,零大小类型(Zero-Sized Type,简称 ZST) 是指在内存中不占用任何存储空间的类型。这些类型的大小为 0 字节,编译器会对它们进行优化,避免为它们分配实际的存储空间。ZST 是 Rust 类型系统中一个非…

专题 - STM32

基础 基础知识 STM所有产品线(列举型号): STM产品的3内核架构(列举ARM芯片架构): STM32的3开发方式: STM32的5开发工具和套件: 若要在电脑上直接硬件级调试STM32设备,则…

ospf收敛特性及其他的小特性

1. 收敛特性 快速收敛:   只第一次计算时计算全部节点Full SPF   增量最短路径优先算法I-SPF(Incremental)    只对受影响的节点进行路由计算   全部路由计算PRC    只对发生变化的路由进行重新计算;    根据I-SPF 算出来的SPT …

如何解决Webview和H5缓存问题,确保每次加载最新版本的资源

WebView 用于加载 H5 页面是常见的做法,它能够加载远程的 HTML、CSS、JavaScript 资源,并且让 Web 应用嵌入到原生 App 中。然而,WebView 的缓存机制有时会导致用户看到的是旧版本的页面或资源,尤其是在 H5 发版后,iOS…