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

相关推荐
CodeClimb33 分钟前
【华为OD-E卷-木板 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
咸鱼翻面儿37 分钟前
Javascript异步,这次我真弄懂了!!!
javascript
qq_589568101 小时前
Echarts的高级使用,动画,交互api
前端·javascript·echarts
暴富的Tdy3 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
℘团子এ3 小时前
js和html中,将Excel文件渲染在页面上
javascript·html·excel
胡西风_foxww5 小时前
【es6复习笔记】Promise对象详解(12)
javascript·笔记·es6·promise·异步·回调·地狱
秃头女孩y5 小时前
【React中最优雅的异步请求】
javascript·vue.js·react.js
请叫我飞哥@6 小时前
HTML5 CSS 与样式详解
前端·css·html5
小马哥编程8 小时前
原型链(Prototype Chain)入门
css·vue.js·chrome·node.js·原型模式·chrome devtools