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

flex: 1 display:flex 导致的宽度失效问题

news 来源：原创 2025/5/9 19:25:32

flex: 1 & display:flex 导致的宽度失效问题

问题复现

有这样的一个业务场景，详情项每行三项分别占33%宽度，每项有label字数不固定所以宽度不固定，还有content 占满标签剩余宽度，文字过多显示省略号，鼠标划入展示全部（title)

现有元素content, 其父元素parent设置了flex, 以下为content的css配置。

flex: 1;
/* display: flex; */
background: #eee;overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;

如果 content 不开启flex，一切完美,

在这里插入图片描述

这其实是因为 min-width 变成了auto，这时只需要改成0即可，但是 content 内容是文字还是会宽度失效
在这里插入图片描述

解决

要实现超出隐藏，可以在 content 再增加元素包含文字，元素宽度设置100%即可（未设置min-width: 0的情况下，content子元素宽度设置也是无效的），样例如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flex-wdith</title><style>.parent {display: flex;width: 400px;height: 200px;border: 1px solid;}.content {background: #eee;height: 100%;flex: 1;display: flex;flex-wrap: wrap;min-width: 0; /* flex: 1 0 50%; */}.inner {width: 100%;display: flex;}.inner .inner1 {height: 50px;flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;background-color: #d0b3f4;}.inner2 {width: 100%;height: 50px;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;background-color: #ed8e8e;}.inner3 {width: 30%;height: 50px;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;background-color: #dff4cb;}</style>
</head>
<body><!-- content设置了flex: 1时再设置 display: flex 会导致content宽度失效， 因为min-width被设置为auto了，需要设置width: 0，这样宽度不会失效再在content增加子元素： width： 100%， 在做布局即可--><div class="parent"><div class="label">【我是个标签】</div><div class="content"><div class="inner"><div class="inner1">标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容</div></div> <div class="inner2">标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容</div><div class="inner3">标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容</div></div></div>
</body>
</html>

在这里插入图片描述

如此，便能在flex: 1的元素再开启弹性布局，随心所欲了。

原因

问了下AI： flex: 1的元素，为啥设置了display: flex 后， min-width会变成auto？，大致也说明白了

默认行为：当一个元素被设置为 display: flex 时，它变成了一个弹性容器，而其子元素成为了 flex 项目（flex items）。根据 CSS 规范，flex 项目默认的 min-width 是 auto，这意味着该元素的最小宽度取决于它的内容。如果内容宽度超过了 flex-basis 设定的初始宽度，min-width: auto 会阻止元素缩小到比其内容更窄。
min-width: auto 的含义：min-width: auto 的意思是，元素的最小宽度会根据其内容自动调整。当父容器的空间变小时，min-width: auto 允许内容的宽度决定元素最小能缩小到多少。对于文字或图片等内容，min-width: auto 会确保元素不会缩小到将内容截断的地步。
与 flex: 1 的关系：在设置 flex: 1 的情况下，元素会尝试尽可能填充父容器的可用空间，但 min-width: auto 可能会阻止该元素缩小到比其内容更小的宽度。如果你希望元素可以自由缩小到任意宽度（即使小于内容宽度），需要显式地将 min-width 设置为 0。

flex: 1 display:flex 导致的宽度失效问题

flex: 1 & display:flex 导致的宽度失效问题问题复现有这样的一个业务场景，详情项每行三项分别占33%宽度，每项有label字数不固定所以宽度不固定，还有content 占满标签剩余宽度，文字过多显示省略号， 鼠标划入展示…...

编程日记 2025/5/9 19:25:32

65页PDF | 企业IT信息化战略规划（限免下载）

一、前言这份报告是企业IT信息化战略规划，报告详细阐述了企业在面对新兴技术成熟和行业竞争加剧的背景下，如何通过三个阶段的IT战略规划（IT 1.0基础建设、IT 2.0运营效率、IT 3.0持续发展），系统地构建IT管理架构、应…...

编程日记 2025/5/6 20:06:49

15.三数之和

给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ，同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。注意：答案中不可以包含重复的三元组。示例 1&am…...

编程日记 2025/5/9 8:04:03

【Notepad++】---设置背景为护眼色（豆沙绿）最新最详细

在编程的艺术世界里，代码和灵感需要寻找到最佳的交融点，才能打造出令人为之惊叹的作品。而在这座秋知叶i博客的殿堂里，我们将共同追寻这种完美结合，为未来的世界留下属于我们的独特印记。【Notepad】---设置背景为护眼色&#xf…...

编程日记 2025/5/4 17:22:02

项目代码第2讲：从0实现LoginController.cs，UsersController.cs、User相关的后端接口对应的前端界面

一、User 1、使用数据注解设置主键和外键设置主键：在User类的U_uid属性上使用[Key]注解。设置外键：在Order类中，创建一个表示外键的属性（例如UserU_uid），并使用[ForeignKey]注解指定它引用User类的哪个…...

编程日记 2025/5/4 17:44:00

电子商务人工智能指南 3/6 - 聊天机器人和客户服务

介绍 81% 的零售业高管表示， AI 至少在其组织中发挥了中等至完全的作用。然而，78% 的受访零售业高管表示，很难跟上不断发展的 AI 格局。近年来，电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…...

编程日记 2025/5/9 19:23:07

vue.js组件开发的所有流程

1. 设计组件架构首先，你需要考虑应用的结构，决定哪些部分应该成为独立的组件。这包括： 提取重复的UI元素：如按钮、输入框、卡片等。功能模块：例如登录框、导航栏、数据表格等。 2. 设置开发环境安装Node.js&#xf…...

编程日记 2025/5/5 8:25:58

从零开始学TiDB（1）核心组件架构概述

首先TiDB深度兼容MySQL 5.7 1. TiDB Server SQL语句的解析与编译：首先一条SQL语句最先到达的地方是TiDB Server集群，TiDB Server是无状态的，不存储数据，SQL 发过来之后TiDB Server 负责解析，优化，编译这…...

编程日记 2025/4/29 10:17:46

VsCode运行Ts文件

1. 生成package.json文件 npm init 2. 生成tsconfig.json文件 tsc --init 3. Vscode运行ts文件在ts文件点击右键执行Run Code,执行ts文件...

编程日记 2025/5/8 22:05:28

1、初始化npm mkdir webpack_test cd webpack_test npm init 2、安装webpack依赖 npm install webpack webpack-cli -D 3、添加文件夹，入口文件 mkdir src touch index.js touch add-content.js 文件夹结构 index.js import addContent from "./add-cont…...

编程日记 2025/5/3 21:33:03

liunx docker 部署 nacos seata sentinel

部署nacos 1.按要求创建好数据库 2.创建docker 容器 docker run -d --name nacos-server -p 8848:8848 -e MODEstandalone -e SPRING_DATASOURCE_PLATFORMmysql -e MYSQL_SERVICE_HOST172.17.251.166 -e MYSQL_SERVICE_DB_NAMEry-config -e MYSQL_SERVICE_PORT3306 -e MYSQL…...

编程日记 2025/5/9 17:29:57

MySQL面试

文章目录事务隔离级别需要解决的问题事务隔离级别 MySQL 中是如何实现事务隔离的实现可重复读什么是存储引擎如何定位慢查询分析慢查询原因MySQL超大分页怎么处理索引失效什么时候建立唯一索引、前缀索引、联合索引？redolog与binlog是如何保证一致的redolog刷盘时…...

编程日记 2025/5/7 9:19:57

linux运维之shell编程

Shell 编程在系统运维中及其重要 1. Shell 编程概述 Shell 是一种命令行解释器，能够执行操作系统的命令。Shell 脚本是一个包含一系列 Shell 命令的文件，它可以被执行，以自动化和批量处理任务。常用的 Shell 类型包括 bash、sh、zsh 等。Shel…...

编程日记 2025/5/9 13:04:20

ssm 多数据源注解版本

application.xml 配置如下 <bean id"primaryDataSource" class"com.alibaba.druid.pool.DruidDataSource" init-method"init" destroy-method"close"></bean> <!-- 使用数…...

编程日记 2025/5/9 11:07:38

Nginx核心配置详解

一、配置文件说明 nginx官方帮助文档：nginx documentation nginx的配置文件的组成部分： 主配置文件：nginx.conf子配置文件: include conf.d/*.conffastcgi， uwsgi，scgi 等协议相关的配置文件mime.types：…...

编程日记 2025/5/9 19:12:19

十六(AJAX3)、XMLHttpRequest、Promise、简易axios封装、案例天气预报、lodash-debounce防抖

1. XMLHttpRequest 1.1 XMLHttpRequest-基本使用 /* 定义：XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更…...

编程日记 2025/5/9 19:16:00

12.06 深度学习-预训练

# 使用更深的神经网络经典神经网络 import torch import cv2 from torchvision.models import resnet18,ResNet18_Weights from torch import optim,nn from torch.utils.data import DataLoader from torchvision.datasets import CIFAR10 from torchvision import tr…...

编程日记 2025/5/7 7:32:16

【计算机网络】期末速成(2)

部分内容来源于网络，侵删~ 第五章传输层概述传输层提供进程和进程之间的逻辑通信，靠**套接字Socket(主机IP地址，端口号)**找到应用进程。传输层会对收到的报文进行差错检测。比特流(物理层)-> 数据帧(数据链路层) -> 分组 / I…...

编程日记 2025/5/6 0:09:28

Python学习笔记10-作用域

作用域定义：Python程序程序可以直接访问命名空间的正文区域作用：决定了哪一部分区域可以访问哪个特定的名称分类： 局部作用域（Local）闭包函数外的函数中（Enclosing）全局作用域&#xff0…...

编程日记 2025/4/30 22:57:24

Sui 主网升级至 V1.38.3

Sui 主网现已升级至 V1.38.3 版本，同时协议升级至 69 版本。请开发者及时关注并调整！ 其他升级要点如下所示： 协议 #20199 在共识快速路径投票中设置允许的轮次数量。节点（验证节点与全节点） #20238 为验证节点…...

编程日记 2025/5/9 19:02:52

linux的vdagent框架设计

1、vdagent Linux 的 spice 客户代理由两部分组成，一个系统范围的守护进程 spice-vdagentd 和一个 X11 会话代理 spice-vdagent，每个 X11 会话有一个。spice-vdagentd 通过 Sys-V initscript 或 systemd 单元启动。如下图：spice-vdagent&a…...

编程日记 2025/5/9 10:16:39

vue3+elementPlus封装的一体表格

目录结构源码 exportOptions.js export default reactive([{label: 导出本页,key: 1,},{label: 导出全部,key: 2,}, ])index.vue <template><div class"flex flex-justify-between flex-items-end"><div><el-button-group><slot name…...

编程日记 2025/5/4 6:32:43

判断是否 AGP7+ 的方法

如何判断？ /*** 是否是AGP7.0.0及以上* param project* return*/static boolean isAGP7_0_0(Project project) {def androidComponents project.extensions.findByName("androidComponents")if (androidComponents && androidComponents.hasProp…...

编程日记 2025/5/7 3:12:05

使用 Streamlit +gpt-4o实现有界面的图片内容分析

在上一篇利用gpt-4o分析图像的基础上，进一步将基于 Python 的 Streamlit 库，结合 OpenAI 的 API，构建一个简洁易用的有界面图片内容分析应用。通过该应用，用户可以轻松浏览本地图片，并获取图片的详细描述。调用gpt-4o…...

编程日记 2025/4/26 6:16:32

树莓集团是如何链接政、产、企、校四个板块的？

树莓集团作为数字影像行业的积极探索者与推动者，我们通过多维度、深层次的战略举措，将政、产、企、校四个关键板块紧密链接在一起，实现了资源的高效整合与协同发展，共同为数字影像产业的繁荣贡献力量。与政府的深度合作政府在产业…...

编程日记 2025/5/6 0:11:05

Fyne ( go跨平台GUI )中文文档-Fyne总览(二)

本文档注意参考官网(developer.fyne.io/) 编写, 只保留基本用法 go代码展示为Go 1.16及更高版本,ide为goland2021.2??????? ?这是一个系列文章： Fyne ( go跨平台GUI )中文文档-入门(一)-CSDN博客 Fyne ( go跨平台GUI )中文文档-Fyne总览(二)-CSDN博客 Fyne…...

编程日记 2025/5/8 22:41:16

MySQL数据库（3）-SQL基础语言学习

1. DDL数据定义语言 1.1 什么是DDL DDL（Data Definition Language，数据定义语言）是SQL语言的一部分，用于定义和修改数据库结构。DDL主要包括以下三类语句： 1.CREATE：用于创建数据库对象，如数…...

编程日记 2025/5/8 8:40:06

下拉框根据sql数据回显

vue <a-form-item label"XXXX" :labelCol"labelCol" :wrapperCol"wrapperCol" required><a-select v-decorator"[disputeType, validatorRules.disputeType]" style"width: 200px" placeholder"请选择XXXX&q…...

编程日记 2025/5/6 13:46:05

电池销售系统

文末获取源码和万字论文，制作不易，感谢点赞支持。摘要在当今信息爆炸的大时代，由于信息管理系统能够更有效便捷的完成信息的管理，越来越多的人及机构都已经引入和发展以信息管理系统为基础的信息化管理模式，随之信…...

编程日记 2025/5/7 21:40:09

四、镜像构建

四、镜像构建从镜像大小上来说，一个比较小的镜像只有十几MB，而内核文件需要一百多MB，因此镜像里面是没有内核的，镜像是在被启动为容器后直接使用宿主机的内核，而镜像本身则只提供相应的rootfs，即系统正常…...

编程日记 2025/5/5 6:38:26

FastAPI 响应状态码：管理和自定义 HTTP Status Code

FastAPI 响应状态码：管理和自定义 HTTP Status Code 本文介绍了如何在 FastAPI 中声明、使用和修改 HTTP 状态码，涵盖了常见的 HTTP 状态码分类，如信息响应（1xx）、成功状态（2xx）、客户端错误&a…...

编程日记 2025/5/5 21:05:57

C#设计模式--原型模式（Prototype Pattern）

原型模式是一种创建型设计模式，它允许通过复制现有对象来创建新对象，而无需通过构造函数。这种方式可以提高性能，特别是在创建复杂对象时。C# 中可以通过实现 ICloneable 接口或自定义克隆方法来实现原型模式。案例 1：文档编辑器…...

编程日记 2025/5/5 0:43:33

使用Goland对6.5840项目进行go build出现异常

使用Goland对6.5840项目进行go build出现异常 Lab地址: https://pdos.csail.mit.edu/6.824/labs/lab-mr.html项目地址: git://g.csail.mit.edu/6.5840-golabs-2024 6.5840运行环境: mac系统 goland git clone git://g.csail.mit.edu/6.5840-golabs-2024 6.5840 cd 6.5840/src…...

编程日记 2025/5/2 11:15:10

使用kibana实现es索引的数据映射和索引模版/组件模版

1 数据映射数据映射官方链接 1.1 日期映射案例 1.创建一条索引。把索引中的字段生日映射为日期，并制定映射后的格式为年月日 PUT http://10.0.0.91:9200/zhiyong18-luckyboy-date {"mappings": {"properties": {"birthday": {&q…...

编程日记 2025/5/9 18:27:57

基于elementui的远程搜索下拉选择分页组件

在开发一个练手项目的时候，需要一个远程搜索的下拉选择组件； elementui自带的el-select支持远程搜索；但如果一次性查询的数据过多；会导致卡顿。故自己实现一个可分页的远程下拉选择组件效果： 代码： <…...

编程日记 2025/5/4 20:15:46

每日一题 LCR 074. 合并区间

LCR 074. 合并区间对遍历顺序注意一下就可以 class Solution { public:vector<vector<int>> merge(vector<vector<int>>& intervals) {int n intervals.size();sort(intervals.begin(),intervals.end());int idx 0;vector<vector<int&g…...

编程日记 2025/5/7 8:56:01

Flink SQL

Overview | Apache Flink FlinkSQL开发步骤 Concepts & Common API | Apache Flink 添加依赖： <dependency><groupId>org.apache.flink</groupId><artifactId>flink-table-api-java-bridge_2.11</artifactId><version>…...

编程日记 2025/5/8 1:04:34

[免费]SpringBoot+Vue企业OA自动化办公管理系统【论文+源码+SQL脚本】

大家好，我是java1234_小锋老师，看到一个不错的SpringBootVue企业OA自动化办公管理系统，分享下哈。项目视频演示【免费】SpringBootVue企业OA自动化办公管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍随着信息技术在管理上越来越深入…...

编程日记 2025/5/9 14:26:28

Linux下编译安装METIS

本文记录Linux下编译安装METIS的流程。零、环境操作系统Ubuntu 22.04.4 LTSVS Code1.92.1Git2.34.1GCC11.4.0CMake3.22.1 一、安装依赖 1.1 下载GKlib sudo apt-get install build-essential sudo apt-get install cmake 2.2 编译安装GKlib 下载GKlib代码， …...

编程日记 2025/5/6 23:12:02

LLM学习路径 - 渐进式构建知识体系

LLM学习路径 - 渐进式构建知识体系文章目录 LLM学习路径 - 渐进式构建知识体系一、模型算法基础二、机器学习三、深度学习四、自然语言处理 (NLP)五、大规模语言模型 (LLM) References 一、模型算法基础编程基础 Web 框架深入学习 Gradio 与 Streamlit，理解其构…...

编程日记 2025/5/6 1:51:59

使用Unity脚本模拟绳索、布料（碰撞）

效果演示： 脚本如下： using System.Collections; using System.Collections.Generic; using UnityEngine;namespace PhysicsLab {public class RopeSolver : MonoBehaviour {public Transform ParticlePrefab;public int Count 3;public int Space 1;…...

编程日记 2025/4/19 13:21:58

Qt Chart 模块化封装曲线图

一版本说明二完成示例此文章包含：曲线轴设置，曲线切换，单条曲线显示，坐标轴。。。三曲线图UI创建在UI界面拖放一个QWidget,然后在 Widget里面放一个 graphicsView 四代码介绍 1 头文件 #include <QString> #in…...

编程日记 2025/5/8 4:13:40

【Linux】深入理解进程管理与fork系统调用的实现原理

【Linux】深入理解进程管理与fork系统调用的实现原理进程基本概念描述进程-PCBtask_struct-PCB的一种task_ struct内容分类组织进程查看进程通过系统调用获取进程标示符Fork 之后的代码共享1. **代码共享**2. **数据段不共享**总结 🌏个人博客主页：个人…...

编程日记 2025/5/7 17:28:17

C语言程序设计P5-2【应用函数进行程序设计 | 第二节】——知识要点：函数的参数及返回值和函数的调用及声明

知识要点：函数的参数及返回值和函数的调用及声明视频： 目录一、任务分析二、必备知识与理论三、任务实施一、任务分析 1.求x的n次方的值也就是求n个x的乘积，可把x和n作为函数的形参，定义一个函数power来完成这个功能&am…...

编程日记 2025/5/7 1:02:27

【LeetCode】169.多数元素

题目连接： https://leetcode.cn/problems/majority-element/solutions/2362000/169-duo-shu-yuan-su-mo-er-tou-piao-qing-ledrh/?envTypestudy-plan-v2&envIdtop-interview-150 题目描述： 思路一： 使用哈希表unordered_map记录每个元…...

编程日记 2025/5/8 5:14:27

0x0118消息 WM_SYSTIMER

0x0118消息就是WM_SYSTIMER 编辑框出现输入光标时,产生的消息. 0x0118 would be the undocumented WM_SYSTIMER, which appears to be used for caret blinks. 0x0118是一个undocument 消息， 微软没有记录。但在一些库的源码中可以看到，比如ATL的库文…...

编程日记 2025/5/7 17:15:54

【Linux内核】Hello word程序

创建测试目录 mkdir -p ~/develop/kernel/hello-1 cd ~/develop/kernel/hello-1 创建MakeFile文件和内核.c文件 nano Makefile nano hello-1.c 编写内容 /* * hello-1.c - The simplest kernel module. */ #include <linux/module.h> /* Needed by all modules */…...

编程日记 2025/5/7 17:21:45

黑马redis

Redis的多IO线程只是用来处理网络请求的，对于读写操作命令Redis仍然使用单线程来处理 Redisson分布式锁实现15问文章目录主线程和IO线程是如何协作的Unix网络编程中的五种IO模型Linux世界一切皆文件生产上限制keys *、flushdb、flushall等危险命令keys * 遍历查询100W数据花…...

编程日记 2025/5/4 21:18:21

Robust Depth Enhancement via Polarization Prompt Fusion Tuning

paper：论文地址 code：github项目地址今天给大家分享一篇2024CVPR上的文章，文章是用偏振做提示学习，做深度估计的。模型架构图如下这篇博客不是讲这篇论文的内容，感兴趣的自己去看paper，主要是分享环境&…...

编程日记 2025/5/5 5:05:56

集合框架（3）Map

Map接口现实生活与开发中，我们常会看到这样的一类集合：用户ID与账户信息、学生姓名与考试成绩、IP地址与主机名等，这种一一对应的关系，就称作映射。Java提供了专门的集合框架用来存储这种映射关系的对象，即java.util…...

编程日记 2025/5/6 15:51:32

flex: 1 & display:flex 导致的宽度失效问题

问题复现

解决

原因

相关文章：