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

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

news 2026/3/31 3:40:57

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 导致的宽度失效问题 问题复现 有这样的一个业务场景&#xff0c;详情项每行三项分别占33%宽度&#xff0c;每项有label字数不固定所以宽度不固定&#xff0c;还有content 占满标签剩余宽度&#xff0c;文字过多显示省略号&#xff0c; 鼠标划入展示…...

编程日记 2024/12/7 23:21:21

Hive 窗口函数与分析函数深度解析：开启大数据分析的新维度

Hive 窗口函数与分析函数深度解析&#xff1a;开启大数据分析的新维度 在当今大数据蓬勃发展的时代&#xff0c;Hive 作为一款强大的数据仓库工具&#xff0c;其窗口函数和分析函数犹如一把把精巧的手术刀&#xff0c;助力数据分析师们精准地剖析海量数据&#xff0c;挖掘出深…...

编程日记 2024/12/7 23:19:18

前端工程 Node 版本如何选择

1. Node 与 Npm 版本对应 这是一个必知必会的问题&#xff0c;尤其是对于维护那些老掉牙、一坨坨、非常大的有着长期历史的老破大工程。 1.1. package-lock.json 版本 首先你要会看项目的 package-lock.json 文件中的 lockfileVersion 版本号&#xff0c;这对于 NPM 安装来说…...

编程日记 2024/12/7 23:17:15

推荐在线Sql运行

SQL Fiddle 1、网址&#xff1a;SQL Fiddle - Online SQL Compiler for learning & practiceDiscover our free online SQL editor enhanced with AI to chat, explain, and generate code. Support SQL Server, MySQL, MariaDB, PostgreSQL, and SQLite.http://www.sqlfi…...

编程日记 2024/12/7 23:16:12

【数据结构】【线性表】特殊的线性表-字符串

目录 字符串的基本概念 字符串的三要素 字符串的基本概念 串的编码 串的实现及基本运算 顺序串的实现 串的静态数组实现 串的动态数组的实现 顺序存储的四种方案 链式串的实现 基本运算 方案三 方案一 字符串的基本概念 数据结构千千万&#xff0c…...

编程日记 2024/12/7 23:14:03

app-1 App 逆向环境准备（mumu模拟器+magisk+LSPosed+算法助手+抓包（socksDroid+charles）+Frida环境搭建

一、前言 本篇是基于 mumu模拟器 进行环境配置记录。&#xff08;真机的后面博客记录&#xff09; 二、mumu模拟器magiskLSPosed算法助手 2.1、mumu模拟器 选择 mumu 模拟器&#xff0c;下载地址&#xff1a;https://mumu.163.com 安装完成后打开&#xff0c;找到设置中心进…...

编程日记 2024/12/7 23:13:01

在米尔FPGA开发板上实现Tiny YOLO V4，助力AIoT应用

学习如何在 MYIR 的 ZU3EG FPGA 开发板上部署 Tiny YOLO v4&#xff0c;对比 FPGA、GPU、CPU 的性能&#xff0c;助力 AIoT 边缘计算应用。 一、 为什么选择 FPGA&#xff1a;应对 7nm 制程与 AI 限制 在全球半导体制程限制和高端 GPU 受限的大环境下&#xff0c;FPGA 成为了中…...

编程日记 2024/12/7 23:11:56

【IT】测试用例模版（含示例）

这里写目录标题 一、测试用例模版二、怎么用模版示例如何使用这个模板 一、测试用例模版 一个相对标准的测试用例模板通常包含以下部分&#xff1a; 测试用例ID&#xff1a;唯一标识符&#xff0c;用于追踪测试用例。测试用例标题&#xff1a;简短描述测试用例的目的。测试用…...

编程日记 2024/12/7 23:09:52

react dnd——一个拖拽组件

React DnD是一个流行的库&#xff0c;用于在React应用程序中实现拖放功能。以下是对React DnD的详细解释&#xff0c;包括示例和API说明&#xff1a; 基本概念 在开始使用React DnD之前&#xff0c;了解以下几个基本概念是很重要的&#xff1a; Drag Source&#xff08;拖动…...

编程日记 2024/12/7 23:08:47

3GPP R18 LTM(L1/L2 Triggered Mobility)是什么鬼？(三) RACH-less LTM cell switch

这篇看下RACH-less LTM cell switch。 相比于RACH-based LTM，RACH-less LTM在进行LTM cell switch之前就要先知道target cell的TA信息，进而才能进行RACH-less过程，这里一般可以通过UE自行测量或者通过RA过程获取，而这里的RA一般是通过PDCCH order过程触发。根据38.300中的描…...

编程日记 2024/12/7 23:07:46

Flutter解压文件并解析数据

Flutter解压文件并解析数据 前言 在 Flutter 开发中&#xff0c;我们经常需要处理文件的读取和解压。 这在处理应用数据更新、安装包、存档文件等场景中尤为常见。 本文将介绍如何在Flutter中使用archive插件来解压文件并解析数据。 准备 在开始之前&#xff0c;我们需要…...

编程日记 2024/12/7 23:05:43

21、结构体成员分布

结构体中的成员并不是紧挨着分布的&#xff0c;内存分布遵循字节对齐的原则。 按照成员定义的顺序&#xff0c;遵循字节对齐的原则存储。 字节对齐的原则&#xff1a; 找成员中占据字节数最大的成员&#xff0c;以它为单位进行空间空配 --- 遇到数组看元素的类型 每一个成员距离…...

编程日记 2024/12/7 23:02:41

TSWIKI知识库软件

TSWIKI 知识库软件介绍 推荐一个适合本地化部署、自托管的知识库软件 TSWIKI介绍 tswiki 是一个适合小团队、个人的知识库、资料管理的软件&#xff0c;所有数据均本地化存储。可以本地化、私有云部署&#xff0c;安装简单。在线预览。 主要功能说明 1、简化的软件依赖和安…...

编程日记 2024/12/7 23:01:40

深度学习安装环境笔记

1、输出cuda版本 torch.version.cuda 返回的是 PyTorch 在编译时所使用的 CUDA 版本&#xff0c;而不是运行时实际调用的 CUDA 版本。PyTorch 在运行时实际调用的 CUDA 版本取决于系统上安装的 CUDA 驱动和库。 import torch from torch.utils.cpp_extension import CUDA_HOME…...

编程日记 2024/12/7 22:59:33

使用android studio写一个Android的远程通信软件（APP）,有通讯的发送和接收消息界面

以下是使用 Android Studio 基于 Java 语言编写一个简单的 Android APP 实现远程通信&#xff08;这里以 TCP 通信为例&#xff09;的代码示例&#xff0c;包含基本的通信界面以及发送和接收消息功能。 1. 创建项目 打开 Android Studio&#xff0c;新建一个 Empty Activity …...

编程日记 2024/12/7 22:58:31

学习Python的笔记14--迭代器和生成器

1.迭代器&#xff08;Iterator&#xff09; 概念&#xff1a; 迭代意味着重复多次&#xff0c;就像循环一样。 迭代器是一个可以记住遍历的位置的对象。 迭代器对象从集合的第一个元素开始访问&#xff0c;直到所有的元素被访问完结束。 迭代器只能往前不会后退。 1.iter…...

编程日记 2024/12/7 22:57:30

车机端同步outlook日历

最近在开发一个车机上的日历助手&#xff0c;其中一个需求就是要实现手机端日历和车机端日历数据的同步。然而这种需求似乎没办法实现&#xff0c;毕竟手机日历是手机厂商自己带的系统应用&#xff0c;根本不能和车机端实现数据同步的。 那么只能去其他公共的平台寻求一些机会&…...

编程日记 2024/12/7 22:54:27

教学案例：k相同的一次函数的图像关系

【题目】 请在同一个平面直角坐标系中画出一次函数y2x, y2x4的图象&#xff0c;并观察图象&#xff0c;你发现这两个图形有什么位置关系&#xff1f;为什么&#xff1f; 【答案】 图象是相互平行的两条直线 【解析】 一、教学活动形式 这里设计的教学活动形式是“画图 →…...

编程日记 2024/12/7 22:50:22

EmoAva:首个大规模、高质量的文本到3D表情映射数据集。

2024-12-03&#xff0c;由哈尔滨工业大学&#xff08;深圳&#xff09;的计算机科学系联合澳门大学、新加坡南洋理工大学等机构创建了EmoAva数据集&#xff0c;这是首个大规模、高质量的文本到3D表情映射数据集&#xff0c;对于推动情感丰富的3D头像生成技术的发展具有重要意义…...

编程日记 2024/12/7 22:49:21

Elasticsearch vs 向量数据库:寻找最佳混合检索方案

图片来自Shutterstock上的Bakhtiar Zein 多年来&#xff0c;以Elasticsearch为代表的基于全文检索的搜索方案&#xff0c;一直是搜索和推荐引擎等信息检索系统的默认选择。但传统的全文搜索只能提供基于关键字匹配的精确结果&#xff0c;例如找到包含特殊名词“Python3.9”的文…...

编程日记 2024/12/7 22:48:20

手把手教你用DrissionPage搭建个人新闻聚合器：自动抓取百度热搜并保存到Excel

用DrissionPage打造智能新闻聚合器&#xff1a;从百度热搜抓取到Excel自动化分析 每天手动刷新闻不仅耗时&#xff0c;还容易错过重要信息。想象一下&#xff0c;如果有个私人助手能自动收集全网热点&#xff0c;整理成结构化的报告&#xff0c;甚至生成直观的可视化图表——这…...

编程新知 2026/3/31 3:30:30

ZYNQ7010核心板硬件设计实战——从原理图到PCB的工程化思考

1. 从零开始构建ZYNQ7010核心板 第一次接触ZYNQ7010这种集成了ARM处理器和FPGA的SoC芯片时&#xff0c;我既兴奋又忐忑。这种混合架构的芯片确实强大&#xff0c;但随之而来的硬件设计复杂度也让人头疼。特别是当看到官方推荐的8层甚至12层PCB方案时&#xff0c;作为个人开发者…...

编程新知 2026/3/31 0:06:14

用Multisim 14.0和AD620/OP07，手把手教你搭建一个能用的简易心电放大电路

从零开始构建心电放大电路&#xff1a;Multisim 14.0与AD620/OP07实战指南 在生物医学信号处理领域&#xff0c;心电信号采集一直是极具挑战性的课题。想象一下&#xff0c;当医生将电极贴在你胸口时&#xff0c;那些微弱的电信号是如何被放大并转化为清晰波形图的&#xff1f;…...

编程新知 2026/3/30 23:20:29

从零到一：基于LLaMA-Factory与Ollama的本地大模型定制化实战

1. 为什么需要本地定制化大模型&#xff1f; 最近两年&#xff0c;大语言模型的发展速度简直让人瞠目结舌。从最初的GPT-3到现在的Llama 3&#xff0c;模型能力越来越强&#xff0c;但随之而来的问题是&#xff1a;这些通用大模型真的能满足我们每个人的特定需求吗&#xff1f;…...

编程新知 2026/3/30 22:58:12

保姆级教程：在绿联NAS上用Docker Compose一键部署PaddleOCR，打造本地私有化OCR服务

绿联NASDocker Compose极简部署PaddleOCR&#xff1a;零命令行打造私有文字识别服务 家里堆积如山的合同发票需要电子化&#xff1f;团队内部敏感文档不敢用云端OCR&#xff1f;绿联NAS用户现在可以抛开复杂命令&#xff0c;用Docker Compose三分钟搭建企业级文字识别服务。本文…...

编程新知 2026/3/30 22:58:12

51单片机项目避坑实录：我的声光控灯为什么白天也亮？从硬件到代码的故障排查指南

51单片机声光控灯项目实战&#xff1a;从硬件选型到代码调试的深度避坑指南 深夜的实验室里&#xff0c;我盯着眼前这个不听话的声光控灯——明明窗外阳光明媚&#xff0c;它却固执地亮着。作为一名嵌入式开发新手&#xff0c;这个看似简单的51单片机项目让我踩遍了所有可能的坑…...

编程新知 2026/3/30 22:58:10

导师推荐！盘点2026年当红之选的AI论文平台

一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂、实测能大幅提速的AI论文平台&#xff0c;覆盖选题构思、文献综述、数据整理、降重润色、格式排版等全流程&#xff0c;高效搞定论文&#xff0c;让你轻松应对学术挑战。 一、全流程王者&#xff1a;一站式搞定论文全链…...

编程新知 2026/3/30 22:29:58

数学建模竞赛避坑指南：E题‘AI体测’数据预处理与特征工程实战解析

数学建模竞赛E题深度解析&#xff1a;从数据清洗到特征工程的实战避坑指南 数学建模竞赛中&#xff0c;数据处理环节往往决定了模型的成败。面对E题"AI体测"这类涉及多源异构数据的题目&#xff0c;许多参赛队伍在数据预处理阶段就埋下了隐患。本文将结合实战经验&am…...

编程新知 2026/3/30 21:02:55

怎样快速掌握mGBA测试套件：5个专业技巧确保模拟器稳定性

怎样快速掌握mGBA测试套件&#xff1a;5个专业技巧确保模拟器稳定性 【免费下载链接】mgba mGBA Game Boy Advance Emulator 项目地址: https://gitcode.com/gh_mirrors/mg/mgba mGBA作为一款开源的高精度Game Boy Advance模拟器&#xff0c;其测试套件是确保模拟器稳定…...

编程新知 2026/3/30 20:56:50

CANopen协议实战指南：从对象字典到PDO映射

1. CANopen协议入门&#xff1a;从零理解工业通信基石 第一次接触CANopen协议时&#xff0c;我被它复杂的术语和抽象的概念搞得晕头转向。直到在某个电机控制项目中被迫深入使用后&#xff0c;才发现这套协议设计得如此精妙。CANopen本质上是一种建立在CAN总线上的应用层协议&a…...

编程新知 2026/3/30 19:11:10