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

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-widthauto,这意味着该元素的最小宽度取决于它的内容。如果内容宽度超过了 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/929841.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

利用tablesaw库简化表格数据分析

tableaw是处理表格数据的优秀工具。它提供了一组强大而灵活的功能&#xff0c;使操作、分析和可视化数据表变得容易。在这篇博文中&#xff0c;我们将介绍tableaw的主要特性、如何使用这些特性&#xff0c;以及如何使用tableaw处理表格数据的一些示例。 tablesaw简介 tableaw…

【看海的算法日记✨优选篇✨】第二回:流动之窗,探索算法的优雅之道

&#x1f308; 个人主页&#xff1a;谁在夜里看海. &#x1f525; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长&#xff0c;行则将至 目录 一、算法思想 双指针 滑动窗口 二、具体运用 1.⻓度最⼩的⼦数组 算法思路 算法流程 代码 2.最⼤…

MicroBlaze软核开发(一):Hello World

实现功能&#xff1a;使用 MicroBlaze软核 串口打印 Hello World Vivado版本&#xff1a;2018.3 目录 MicroBlaze介绍 vivado部分&#xff1a; 一、新建工程 二、配置MicroBlaze 三、添加Uart串口IP 四、生成HDL文件编译 SDK部分&#xff1a; 一、导出硬件启动SDK 二、…

camera驱动开发(初学)

camera驱动开发 初学camera驱动开发 随笔记一下顺便整理一下初学的学习路线。内容来源于各大网站&#xff0c;大自然的搬运工。 一、camera基本概念 ①三路电压 camera包含的三路电压为模拟电压&#xff08;VCAMA&#xff09;&#xff0c;数字电压&#xff08;VCAMD&#x…

在Ubuntu22.04.5上安装Docker-CE

文章目录 1. 查看Ubuntu版本2. 安装Docker-CE2.1 安装必要的系统工具2.2 信任Docker的GPG公钥2.3 写入软件源信息2.4 安装Docker相关组件2.5 安装指定版本Docker-CE2.5.1 查找Docker-CE的版本2.5.2 安装指定版本Docker-CE 3. 启动与使用Docker3.1 启动Docker服务3.2 查看Docker…

C# 编程效率提升指南:掌握算数运算、循环与方法封装

在这篇文章中将带你深入探索C#中的几大关键技术点&#xff0c;从如何精准进行算数运算、灵活运用循环控制结构&#xff0c;到通过方法封装提升代码的复用性&#xff0c;再到正确使用可空类型避免潜在的空值引用异常&#xff0c;这些概念和技巧无一不是编写清晰、高效、健壮代码…

常见Linux命令(详解)

文章目录 常见Linux命令文件目录类命令pwd 打印当前目录的绝对路径ls 列出目录内容cd 切换路径mkdir 建立目录rmdir 删除目录touch 创建空文件cp 复制文件或目录rm 移除文件或者目录mv 移动文件与目录或重命名cat 查看文件内容more 文件分屏查看器less 分屏显示文件内容head 显…

html+css网页设计 旅游 马林旅行社3个页面

htmlcss网页设计 旅游 马林旅行社3个页面 网页作品代码简单&#xff0c;可使用任意HTML辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 获取源码 1&#…

【目标跟踪】AntiUAV600数据集详细介绍

AntiUAV600数据集的提出是为了适应真实场景&#xff0c;即无人机可能会随时随地出现和消失。目前提出的Anti-UAV任务都只是将其看做与跟踪其他目标一样的任务&#xff0c;没有结合现实情况考虑。 论文链接&#xff1a;https://arxiv.org/pdf/2306.15767https://arxiv.org/pdf/…

网络——HTTP与HTTPS三次握手和四次挥手

HTTP协议本身并不直接处理TCP连接的建立和关闭&#xff0c;这些是由底层的TCP协议来完成的。但是&#xff0c;由于HTTP通常运行在TCP之上&#xff0c;因此理解TCP的三次握手&#xff08;用于建立连接&#xff09;和四次挥手&#xff08;用于关闭连接&#xff09;对于理解HTTP通…

Issue id: AppLinkUrlError 应用intent-filter 配置深链接 URL 问题分析 | AndroidManifest

AndroidManifest.xml 配置文件中&#xff0c;对 activity 组件进行声明的时候&#xff0c;独立应用在 IDE 显示 intent-filter 报错&#xff0c;但不影响实际编译&#xff0c;因为是系统应用&#xff0c;肯定会有此 URL 的存在。 AOSP 源码&#xff1a; <activity android:…

Scala中的正则表达式

它是一种强大的文本处理工具&#xff0c;通过定义一系列的字符和操作符组合来描述这些模式。简单来说&#xff0c;它就像一种文本模式的“配方”。 package test9object test9_1 {//正则表达式def main(args: Array[String]): Unit {//定义一个正则表达式//1.[ab]:表示匹配一个…

《中型 Vue 项目:挑战与成长》

一、引言 在当今的前端开发领域&#xff0c;Vue 作为一款渐进式 JavaScript 框架&#xff0c;以其强大的功能和灵活性备受开发者青睐。对于中型 Vue 项目而言&#xff0c;其重要性不言而喻。中型 Vue 项目通常在功能复杂度和规模上介于小型项目和大型项目之间&#xff0c;既需要…

vscode插件 live-server配置https

背景&#xff1a;前端有时候需要在本地搭建https环境测试某些内容&#xff08;如https下访问http资源&#xff0c;下载&#xff09; 步骤&#xff1a; 1.vscode集成开发软件(应该所有前端开发同学都安装了&#xff0c;我用webstorm&#xff0c;vscode备用) 2.vscode安装live…

DBA面试题-1

面临失业&#xff0c;整理一下面试题&#xff0c;找下家继续搬砖 主要参考&#xff1a;https://www.csdn.net/?spm1001.2101.3001.4476 略有修改 一、mysql有哪些数据类型 1&#xff0c; 整形 tinyint,smallint,medumint,int,bigint&#xff1b;分别占用1字节、2字节、3字节…

「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果

本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色&#xff0c;用户可以在视觉上感受到按钮的闪烁效果&#xff0c;提升界面互动体验。 关键词 UI互动应用闪烁动画动态按钮状态管理用户交互 一、功能说明 闪烁按钮效果应用实现了一个动态交互功能&#xf…

「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局

本篇将带你实现一个简单的照片墙布局应用&#xff0c;通过展示多张图片组成照片墙效果&#xff0c;用户可以点击图片查看其状态变化。 关键词 UI互动应用照片墙布局Grid 布局动态图片加载用户交互 一、功能说明 照片墙布局应用的特点&#xff1a; 动态加载多张图片组成网格布…

LabVIEW中“this VI‘s owning library is missing”错误及解决

问题描述 当加载或打开一个VI时&#xff0c;如果其所属的项目库未加载到内存&#xff0c;LabVIEW将提示错误&#xff1a;“this VIs owning library is missing”&#xff08;该VI的所属库不存在&#xff09;。 该问题通常发生在以下情况下&#xff1a; 项目库文件丢失或路径…

电子电气架构 --- 新四化对汽车电子的影响

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所谓鸡汤&#xff0c;要么蛊惑你认命&#xff0c;要么怂恿你拼命&#xff0c;但都是回避问题的根源&…

etcd分布式存储系统快速入门指南

在分布式系统的复杂世界中&#xff0c;确保有效的数据管理至关重要。分布式可靠的键值存储在维护跨分布式环境的数据一致性和可伸缩性方面起着关键作用。 在这个全面的教程中&#xff0c;我们将深入研究etcd&#xff0c;这是一个开源的分布式键值存储。我们将探索其基本概念、特…