当前位置： 首页 > news >正文

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

news 2025/7/18 11:33:17

一、问题
遇到个样式问题，当父级元素设置了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…...

编程日记 2025/1/16 6:55:11

Vue.js组件开发-如何实现路由懒加载

在Vue.js应用中，路由懒加载是一种优化性能的技术，它允许在需要时才加载特定的路由组件，而不是在应用启动时加载所有组件。这样可以显著减少初始加载时间，提高用户体验。在Vue Router中，实现路由懒加载非常简单&#xf…...

编程日记 2025/1/16 6:53:06

灵活妙想学数学

灵活妙想学数学 题1：海星有几只？ 一共有12只海洋生物，分别是5只脚的海星，8只脚的章鱼和10只脚的鱿鱼，这些海洋动物的脚一共有87只，每种生物至少有1只，问海星有几只？ 解&#xff1a…...

编程日记 2025/1/16 6:52:05

使用 Multer 上传图片到阿里云 OSS的两种方式

文件上传到哪里更好？ 上传到服务器本地 上传到服务器本地，这种方法在现今商业项目中，几乎已经见不到了。因为服务器带宽，磁盘 IO 都是非常有限的。将文件上传和读取放在自己服务器上，并不是明智的选择。 上传到云储存…...

编程日记 2025/1/16 6:51:04

破解合同管理之痛，开启智能化管理新模式

合同管理是采购管理中的一项重要环节，涉及合同洽谈、草拟、签订、生效、履行、失效全过程。随着企业业务规模的发展壮大，企业与各类供应商之间的合作往来更加频繁，需要签署和管理的合同文件也不断增多，如何提升合同管理效率成为企…...

编程日记 2025/1/16 6:46:57

Linux-day06

第14章 进程管理（重点） 进程基本介绍 程序运行起来就是一个进程 1.程序和进程的关系 2.在Linux中有两种方式执行，一种叫前台，一种后台 ps指令详解 显示系统执行的进程 USER：进程执行用户 PID：进程号 …...

编程日记 2025/1/16 6:45:55

源码编译安装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库…...

编程日记 2025/1/16 6:43:52

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”，…...

编程日记 2025/1/16 6:38:46

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…...

编程日记 2025/1/16 6:36:44

mysql、oracle、sqlserver的区别

一、保存数据的持久性： MySQL：是在数据库更新或者重启，则会丢失数据。 Oracle：把提交的sql操作线写入了在线联机日志文件中，保持到了磁盘上，可以随时恢复。 SqlServer：2…...

编程日记 2025/1/16 6:34:42

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…...

编程日记 2025/1/16 6:33:41

初识算法和数据结构P1：保姆级图文详解

文章目录 前言1、算法例子1.1、查字典（二分查找算法）1.2、整理扑克（插入排序算法）1.3、货币找零（贪心算法） 2、算法与数据结构2.1、算法定义2.2、数据结构定义2.3、数据结构与算法的关系2.4、独立于编程语言…...

编程日记 2025/1/16 6:30:37

【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 库，便于开发人员提高效率 那…...

编程日记 2025/1/16 6:29:36

【IDEA版本升级JDK21报错方法引用无效 找不到符号】

java: 方法引用无效 找不到符号 符号: 方法 getFirst() 位置: 接口 java.util.List 升级JDK21版本遇到问题，报错找不到符号 但是点进去又能发现这个函数，证明能够找到这个方法，但是就是报错 java: 方法引用无效 找不到符号 符号: …...

编程日记 2025/1/16 6:28:32

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…...

编程日记 2025/1/16 6:27:28

JavaSE学习心得（多线程与网络编程篇）

多线程-网络编程 前言 多线程&JUC 多线程三种实现方式 第一种实现方式 第二种实现方式 第三种实现方式 常见成员方法 买票引发的安全问题 同步代码块 同步方法 Lock锁 生产者和消费者 常见方法 等待唤醒机制 练习 抢红包 抽奖 多线程统计并求最…...

编程日记 2025/1/16 6:26:24

平均精确率均值（mAP）

mAP（mean Average Precision，平均精确率均值） 并不是传统意义上的“精度”（Accuracy），而是一种专门用于评估目标检测、图像分割或信息检索等任务的性能指标。它更全面地反映了模型在不同类别和不同置信度阈…...

编程日记 2025/1/16 6:25:22

VUE学习笔记1__创建VUE实例

核心步骤 <div id"app"><!-- 这里存放渲染逻辑代码 --><h1>{{ msg }}</h1><a href"#">{{count}}</a> </div><!-- 引入在线的开发版本核心包 --> <!-- 引入核心包后全局可使用VUE构造函数 --> <…...

编程日记 2025/1/16 6:24:20

Inxpect毫米波安全雷达:精准检测与动态保护,工业自动化可靠选择

Inxpect毫米波安全雷达具备“精准检测、动态区域保护、环境适应性”三大核心功能。在工业自动化和机器人系统里&#xff0c;这些功能发挥着重要作用,有助于提升安全性与效率。Inxpect雷达运用毫米波技术&#xff0c;在诸如存在灰尘、烟雾或碎屑等复杂环境中&#xff0c;也能保持…...

编程日记 2025/1/16 6:22:19

基于禁忌搜索算法的TSP问题最优路径搜索matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于禁忌搜索算法的TSP问题最优路径搜索&#xff0c;旅行商问题&#xff08;TSP&#xff09;是一个经典的组合优化问题。其起源可以追溯到 19 世纪初&#xff0c;…...

编程日记 2025/1/16 6:21:18

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/7/9 5:50:30

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/10 11:31:41

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/7/16 10:55:43

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/7/18 7:50:12

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2025/7/7 4:55:40

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/6/16 10:20:03

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2025/7/18 11:01:21

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/7/8 3:08:09

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/7/16 1:00:26

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/7/18 1:25:02