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

相关推荐
独立开阀者_FwtCoder2 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
Hilaku10 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿11 分钟前
Js事件循环
javascript
datagear11 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
namehu19 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
多啦C梦a21 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
yvvvy35 分钟前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript
jqq66642 分钟前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js
Mintopia44 分钟前
BVH:光线追踪里的空间管家
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学