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

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

问题复现

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

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

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子元素宽度设置也是无效的),样例如下

html 复制代码
<!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

相关推荐
@大迁世界8 小时前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
jump_jump8 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD8 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~9 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
Jedi Hongbin9 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马9 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
liu****11 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San3011 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
芒果茶叶12 小时前
并行SSR,SSR并行加载
前端·javascript·架构
威风的虫12 小时前
JavaScript中的axios
开发语言·javascript·ecmascript