flex:1,下的子元素overflow hidden失效的问题

最新推荐文章于 2024-05-11 17:30:31 发布
最新推荐文章于 2024-05-11 17:30:31 发布
阅读量6.5k 收藏 3
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011025329/article/details/81303579
版权

在一个元素设置了flex：1后，

子元素想做字符超出显示省略号的行为

overflow hidden
white-space nowrap
text-overflow ellipsis

发现 overflow hidden失效了，元素随着文字的增多而变长

 

在网上查找发现其父元素设置

min-width: 0  或者 min-height: 0 即可

 

梦幻般的菜鸟
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2 常用用法- flex + overflow:hidden
09-25
css - flex + overflow:hidden
Flex布局实现div内部子元素垂直居中的示例
01-21
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。  采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），...
flex布局,flex:1下的子元素overflow hidden失效问题解决方法
qq_29965101的博客
05-07 1588
问题描述：flex布局,flex:1下的子元素如果文字超长，并不会按预期“文字超出部分显示为用省略号代替”显示，文字超出部分会撑开容器显示，而不是限制在flex:1的动态剩余的空间中显示 min-width:0 ...
flex 弹性盒子和overflow：hidden的注意事项
wmeng13的博客
12-07 4895
弹性盒子与overflow：hidden 不能同时使用，同时使用的话overflow：hidden不生效
flex中子项flex:1；时，如果出现滚动条，而不是无限撑大
最新发布
jmc666的博客
05-11 489
Flex 布局的子项会尝试填充其父容器的可用空间。如果父容器没有固定的高度，那么子项可能就不会出现滚动条，因为它可以无限扩展。css中flex布局，某个flex:1;，如果超出最大可支配高度，如果让该子项目出现滚动条，而不是无限撑大呢？的剩余空间，但如果其内容超出了这个空间，滚动条就会出现。这样，子项会尝试填充剩余空间，但不会超过其父容器的总高度。，它将能够扩展到其父容器的整个高度（减去其他兄弟元素占据的空间）：当子项的内容超出其分配的空间时，设置。（如果需要的话），并使用。
flex1时内容溢出
JudyC的博客
11-10 2116
flex: 1 时内容溢出
overflow:hidden / scroll不会隐藏所有子元素
徐同保的专栏
11-02 1654
拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式； 内部溢出的元素是通过position:absolute绝对定位，并且该定位元素的包含块是设置overflow:hidden元素的父级元素 <!DOCTYPE html> <html lang="en"> <head> ...
解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题
03-31 806
　　受大家启迪，于是最近深入研究了一下Css3中的一些属性。之中也是碰到了个不为我知的问题，在这里特此总结并与大家分享。 　　问题重现：在父元素上应用了 border-radius 的圆角属性、加上 overflow:hidden属性 、并且子元素填充整个父元素。于是看到的效果是：子元素超出父元素圆角的部分被隐藏掉，形成一个圆角头像容器的结构。代码如下： 　　 <!...
深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
09-22
当为父元素设置 `overflow:hidden` 时，浏览器会创建一个新的BFC（块格式化上下文），使得父元素能够包含其内部浮动的子元素，而不会导致背景色或边框消失。 3. **解除margin坍塌** CSS中的margin坍塌是指相邻...
overflow:auto的用法详解
01-18
在开始正文前，我介绍一下overflow和flex布局的某些用法。 overflow：auto；如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容。 flex中的属性 display: flex; flex-direction: column; 主轴为垂直方向，...
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
 justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） flex-end 从主轴的尾部开始排，...
flex布局还要使用overflow-x:scroll；的问题
小权权的博客
04-17 2353
子元素加上flex-shrink: 0; .box{ width: 300px; overflow-x: scroll; display: flex; } .item{ width: 200px; height: 50px; flex-shrink: 0; } </style> </head> <div class="box"> <div class="item" style="background-color: red
CSS 记录在overflow:auto下，子元素height:100%的坑
japlus的博客
04-01 1566
<div id="outer" style="height: 200px;overflow: auto; width:100px"> <div id="inner" style="height:100%"> <div style="line-height: 50px">0</div> <div style="line-height: 50px">1</div> <div s.
flex布局下overflow失效问题
热门推荐
颤抖的羽翼
04-10 1万+
场景描述：上图场景中，需求是 职位名称  与  薪资 保持在同一行，无论薪资多长总能保持正常显示，当职位名称过长时超出部分显示  "..." 省略符，如和实现过程中发现使用flex布局时，薪资部分不设置宽度，自适应，左侧职位名称部分设置flex: 1;使用overflow: hidden时失效解决办法：左侧职位名称部分设置如下flex: 1; width: 0;...
关于flex:1的情况下，overflow:auto没有生效的说明
weixin_43660626的博客
03-10 3688
flex:1的元素的父元素必须保证高度或者宽度有具体的数值；如果父元素的高度或者宽度也是flex:1自适应的，那么子元素的overflow:auto就不会生效； .parent{ flex:1; // 没有具体数值不生效 height:calc(100vh - 100px); // 有具体数值 生效 } ...
overflow：hidden使得同级的行内块元素不对称
qq_45852515的博客
11-15 174
行内元素的默认对齐方式是基线对齐即（vertical-align：baseline） 设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘；其他行内元素依然还是基线对齐就会出现下沉的视觉效果。2、设置所有的行内元素的overflow不为visible。1、重新设置所有行内元素的对齐方式。
解决css中flex弹性盒子与overflow一起使用时导致的样式问题
guolijo的博客
02-03 2917
最近在写页面的时候，在一个div上同时设置了flex和overflow后，出现了一些问题。 需求： 网站顶部导航栏为两列布局，一列为宽度固定的logo，另一列的宽度自适应，且内部元素超出时可以滚动 需求比较简单，上来就是一个flex： <div class="header"> <div class="logo">LOGO</div> <div class="navigator"> <div class="item"&g
ztree项目中实战
chuan9966的专栏
05-23 288
废话不多说，直接贴核心代码： <style type="text/css"> ul.ztree { margin-top: 10px; border: 1px solid #617775; background: #f0f6e4; width: 220px; height: 360px; ...
针对flex布局下文字溢出的解决方法
weixin_67321774的博客
09-30 3058
flex布局，文字溢出
设置flex:1下的flex:1后设置overflow：auto无效
05-30
当你在一个 `flex` 子元素上设置 `flex: 1` 和 `overflow: auto` 时，如果该子元素的内容不足以填满父元素，则该子元素的高度将被设置为父元素的高度，因此 `overflow: auto` 将不会起作用。 解决这个问题的方法是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值