当父级元素设置了flex 布局 ，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 （css 样式问题）
一、问题
遇到个样式问题，当父级元素设置了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); // 关键代码 设置最小宽度和最大宽度 可以防止子元素溢出}}
相关文章：
当父级元素设置了flex 布局 ，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 （css 样式问题）
一、问题 遇到个样式问题，当父级元素设置了flex 布局 ，两个子元素都设置了flex :1, 但是当子元素放不下的时候会溢出父元素怎么解决 （拖拽浏览器 使页面变小） 二、解决方法 .father{min-height: 600px;width: 100%;display: flex…...
Vue.js组件开发-如何实现路由懒加载
在Vue.js应用中，路由懒加载是一种优化性能的技术，它允许在需要时才加载特定的路由组件，而不是在应用启动时加载所有组件。这样可以显著减少初始加载时间，提高用户体验。在Vue Router中，实现路由懒加载非常简单…...
灵活妙想学数学
灵活妙想学数学 题1：海星有几只？ 一共有12只海洋生物，分别是5只脚的海星，8只脚的章鱼和10只脚的鱿鱼，这些海洋动物的脚一共有87只，每种生物至少有1只，问海星有几只？ 解：…...
使用 Multer 上传图片到阿里云 OSS的两种方式
文件上传到哪里更好？ 上传到服务器本地 上传到服务器本地，这种方法在现今商业项目中，几乎已经见不到了。因为服务器带宽，磁盘 IO 都是非常有限的。将文件上传和读取放在自己服务器上，并不是明智的选择。 上传到云储存…...
破解合同管理之痛，开启智能化管理新模式
合同管理是采购管理中的一项重要环节，涉及合同洽谈、草拟、签订、生效、履行、失效全过程。随着企业业务规模的发展壮大，企业与各类供应商之间的合作往来更加频繁，需要签署和管理的合同文件也不断增多，如何提升合同管理效率成为企…...
Linux-day06
第14章 进程管理（重点） 进程基本介绍 程序运行起来就是一个进程 1.程序和进程的关系 2.在Linux中有两种方式执行，一种叫前台，一种后台 ps指令详解 显示系统执行的进程 USER：进程执行用户 PID：进程号 …...
源码编译安装httpd 2.4，提供系统服务管理脚本并测试
总结需要安装的包 sudo yum groupinstall "Development Tools" -y #httpd的依赖包yum install tar -y #tar压缩包sudo yum install apr-devel apr-util-devel #APR库 提供跨平台接口的库sudo yum install pcre pcre-devel # PCRE库和 pcre-config工具--提供PCRE库…...
Linux固定ip
进入etc/sysconfig/network-scripts目录 cd /etc/sysconfig/network-scripts 编辑ifcfg-ens33文件 vi ifcfg-ens33 将BOOTPROTO的值改为“static”，在文档最后添加需要的固定IP BOOTPROTO"static" IPADDR192.168.132.136点击按键“esc”，…...
)
Java 输入输出流(上)
目录 1.Java 输入输出流 2.Java File类 3.Java File类目录 1.创建目录 2.列出目录中的文件 4.Java File类文件 1.文件的创建与删除 2.运行可执行文件 5.Java 文件字节输入流(1) 6.Java 文件字节输入流(2) 1.使用输入流读取字节 2.关闭流 7.Java 文件字节输出流(1…...
mysql、oracle、sqlserver的区别
一、保存数据的持久性： MySQL：是在数据库更新或者重启，则会丢失数据。 Oracle：把提交的sql操作线写入了在线联机日志文件中，保持到了磁盘上，可以随时恢复。 SqlServer：2…...
Java+Maven+GDAL
下载已经编译好的压缩包，下载地址 解压 jar 包 release-1930-x64-dev.zip\release-1930-x64\bin\gdal\java 目录下 打成Maven依赖 mvn install:install-file -Dfilegdal-3.10.1.jar -DgroupIdorg.gdal -DartifactIdgdal -Dversion3.10.1 -Dpackagingjar -Dgener…...
初识算法和数据结构P1：保姆级图文详解
文章目录 前言1、算法例子1.1、查字典（二分查找算法）1.2、整理扑克（插入排序算法）1.3、货币找零（贪心算法） 2、算法与数据结构2.1、算法定义2.2、数据结构定义2.3、数据结构与算法的关系2.4、独立于编程语言…...
【Go】Go Gorm 详解
1. 概念 Gorm 官网：https://gorm.io/zh_CN/docs/ Gorm：The fantastic ORM library for Golang aims to be developer friendly，这是官网的介绍，简单来说 Gorm 就是一款高性能的 Golang ORM 库，便于开发人员提高效率 那…...
【IDEA版本升级JDK21报错方法引用无效 找不到符号】
java: 方法引用无效 找不到符号 符号: 方法 getFirst() 位置: 接口 java.util.List 升级JDK21版本遇到问题，报错找不到符号 但是点进去又能发现这个函数，证明能够找到这个方法，但是就是报错 java: 方法引用无效 找不到符号 符号: …...
Node.js 版本管理工具完全指南
Node.js 版本管理工具完全指南 目录 1. nvm (Node Version Manager)2. n (Node Package Manager)3. fnm (Fast Node Manager)4. Volta5. 工具对比 1. nvm (Node Version Manager) 1.1 安装指南 macOS/Linux # 使用 curl 安装 curl -o- https://raw.githubusercontent.com…...
JavaSE学习心得（多线程与网络编程篇）
多线程-网络编程 前言 多线程&JUC 多线程三种实现方式 第一种实现方式 第二种实现方式 第三种实现方式 常见成员方法 买票引发的安全问题 同步代码块 同步方法 Lock锁 生产者和消费者 常见方法 等待唤醒机制 练习 抢红包 抽奖 多线程统计并求最…...
平均精确率均值（mAP）
mAP（mean Average Precision，平均精确率均值） 并不是传统意义上的“精度”（Accuracy），而是一种专门用于评估目标检测、图像分割或信息检索等任务的性能指标。它更全面地反映了模型在不同类别和不同置信度阈…...
VUE学习笔记1__创建VUE实例
核心步骤 <div id"app"><!-- 这里存放渲染逻辑代码 --><h1>{{ msg }}</h1><a href"#">{{count}}</a> </div><!-- 引入在线的开发版本核心包 --> <!-- 引入核心包后全局可使用VUE构造函数 --> <…...
Inxpect毫米波安全雷达:精准检测与动态保护,工业自动化可靠选择
Inxpect毫米波安全雷达具备“精准检测、动态区域保护、环境适应性”三大核心功能。在工业自动化和机器人系统里，这些功能发挥着重要作用,有助于提升安全性与效率。Inxpect雷达运用毫米波技术，在诸如存在灰尘、烟雾或碎屑等复杂环境中，也能保持…...
基于禁忌搜索算法的TSP问题最优路径搜索matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于禁忌搜索算法的TSP问题最优路径搜索，旅行商问题（TSP）是一个经典的组合优化问题。其起源可以追溯到 19 世纪初，…...
【技能篇】RabbitMQ消息中间件面试专题
1. RabbitMQ 中的 broker 是指什么？cluster 又是指什么？ 2. 什么是元数据？元数据分为哪些类型？包括哪些内容？与 cluster 相关的元数据有哪些？元数据是如何保存的？元数据在 cluster 中是如何分布…...
基于python+Django+Mysql的校园二手交易市场
文章目录 基于pythonDjangoMysql的校园二手交易市场运行步骤系统设计功能设计任务目标用户特点参与者列表基本要求功能模块图 数据库设计会员用户信息表（user_userinfo）商品信息表（goods_goodsinfo）管理员用户信息表（a…...
DALI DT6与DALI DT8介绍
“DT”全称Device Type，是DALI-2 标准协议中的IEC 62386-102(即为Part 102)部分对不同类型的控制设备进行一个区分。不同的Device Type代表不同特性的控制设备，也代表了这种控制设备拥有的扩展的特性。 在DALI（数字可寻址照明接口）…...
优化版本，增加3D 视觉 查看前面的记录
上图先 运来的超出发表上限，重新发。。。 #11:06:57Current_POS_is: X:77Y:471Z:0U:-2 C:\Log\V55.txt import time import tkinter as tk from tkinter import messagebox from PIL import Image, ImageTk import socket import threading from date…...
【25-cv-05917】HSP律所代理Le Petit Prince 小王子商标维权案
Le Petit Prince 小王子 案件号：25-cv-05917 立案时间：2025年5月28日 原告：SOCIETE POUR LOEUVRE ET LA MEMOIRE DANTOINE DE SAINT EXUPERY - SUCCESSION DE SAINT EXUPERY-DAGAY 代理律所：HSP 原告介绍 《小王子》&#x…...
Netty 实战篇：为自研 RPC 框架加入异步调用与 Future 支持
我们在上篇实现了一个轻量级 RPC 框架，现在要进一步优化 —— 加入异步响应支持，让 RPC 通信变得真正高效、非阻塞、支持并发。 一、为什么需要异步调用？ 上篇的 RPC 框架是“同步阻塞”的： 每次发送请求后，必须等待服…...
Windows 11 家庭版 安装Docker教程
Windows 家庭版需要通过脚本手动安装 Hyper-V 一、前置检查 1、查看系统 快捷键【winR】，输入“control” 【控制面板】—>【系统和安全】—>【系统】 2、确认虚拟化 【任务管理器】—【性能】 二、安装Hyper-V 1、创建并运行安装脚本 在桌面新建一个 .…...
某验4无感探针-js逆向
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 一、总体概述二、请求分析1.分析请求流程三、逆向分析四、执行验证总结一、总体概述 本文主要实现用协议过某验4无感探针，相关的链接：aHR0cHM6Ly9ndDQuZ2VldGVzdC5jb20vZGVtb3Y0L2ludmlzaWJsZS1…...
微软 Azure AI Foundry（国际版）十大重要更新
2025 年被广泛视为 “AI 智能体元年”。在过去半年，微软密集发布众多创新技术，构建起从基础设施层、开发工具层到场景应用层的完整技术矩阵，加速推动诸多具备自主决策能力的 “超级助理” 智能体落地，形成完整的 AI 赋能生态&…...
Realsense D435i 使用说明
D435i 驱动安装 及 ROS使用 Ubuntu16.04适配https://blog.csdn.net/lemonxiaoxiao/article/details/107834936 过程中遇到fatal error ; 需要添加标签。 使用下面网址的博客解决了。https://blog.csdn.net/xuzhengzhe/article/details/135407342 最终如下： target…...