flex布局宽高被内容撑开的问题

最新推荐文章于 2024-07-03 12:00:38 发布
最新推荐文章于 2024-07-03 12:00:38 发布
阅读量2.3k 收藏 3
点赞数 4
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43794007/article/details/134161300
版权

flex布局宽高被内容撑开的问题

在使用 el-table 组件时，父级容器设置flex:1布局，但是宽/高会被整体内容撑开，导致布局失调

解决方法：

将盒子的width设置为 0 ，然后使用 flex样式，将宽度交给 flex 布局来决定，容器就不会被撑开

 width: 0;
 flex: 1

如果内容大小确定，

flex-grow:0;//是否自动增长空间
flex-shrink:0;//是否自动缩小空间
、小伙
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Flex布局之关于组件的大小
07-27
Flex布局之关于组件的大小 Flex布局之关于组件的大小
浅谈CSS 高度塌陷问题
09-22
在这个例子中，`.first`盒子没有设置高度，原本应该由`.first-child1`和`.first-child2`这两个子元素撑开，但由于它们都设置了浮动，因此`.first`盒子的高度被计算为零，导致`.second`和`.third`盒子向上移动，与`....
flex布局被内容被撑开及flex布局下定宽元素被压缩
meimeib的博客
07-20 4835
实现效果 使用flex进行左右布局，左边定宽200排序，右边自适应，当右边内容过多，造成右边盒子被撑开，会造成两种问题 左边定宽盒子被压缩 解决办法： flex-grow:0;//是否自动增长空间 flex-shrink:0;//是否自动缩小空间 右边自适应的盒子被撑开 解决办法： flex:1; width:0; 将右边自适应的盒子的宽度设置为 0 ，然后使用 flex：1 样式，将宽度交给 flex 布局来决定，最终子元素不会被内容撑开，达到想要的效果。 ...
flex:1的大坑
i-cat的博客
09-16 1190
设置flex:1不生效,高度还是会超出父元素,如何解决?
父元素设置display:flex后，子级元素高会跟随其他元素自动撑开问题
油墨香^-^的博客
06-05 83
子级元素增加：align-self:baseline。
css flex 子元素溢出时，父元素被撑开解决方案
最新发布
weixin_48230016的博客
07-03 695
3.无论多少层子元素，只要不想给限制的宽高，想让元素flex：1；自适应宽高，都一层层给flex为1时的元素 宽或高 为0限制下去。可以用于解决子元素溢出，撑大父元素，父元素不出现滚动条等问题。自适应填满时，子元素内容溢出，父元素内容撑大，导致页面显示问题，或设置了overflow 为scroll 的元素没出现滚动条等问题。2.同上，如果是纵向排列，flex: 1;的元素是高度铺满的，那就加上height: 0;则元素高度自适应的同事，高度不会被撑大。1.如果是横向排列，flex: 1;
flex 布局 子元素不设置宽高，高度撑满父元素的问题
热门推荐
qq_42816270的博客
02-12 1万+
align-items: stretch 子元素不设置宽高，其高度与父元素高度相同
flex 高度或者宽度被拉伸解决方案
明耀的博客
01-09 8699
<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } .a {width: 100px;} 正常两栏布局，但如果b得子元素太宽，会撑开b，导致a的宽度被挤小 将b的宽度设置为width: 0;，就可以解决 总结： flex布局，如果自身高度或者宽度被拉伸了，直接把自己的
父元素flex:1 高度却被子元素撑开的问题
Supposelll的博客
01-29 2765
当父元素设置了flex:1的情况下，想在其中子元素超出父元素高度的情况下，产生滚动条，在父元素区域滚动。但是遇到问题，当子元素高度超过父元素高度时，不会在父元素区域产生滚动条，而是超出了父元素区域，在上层产生了滚动条。
父元素flex:1时高度被子元素撑开的解决方法
weixin_46447553的博客
01-05 1645
父元素flex:1时高度被子元素撑开的解决方法
Flex 布局中避免子元素高度被撑高
阿牛哥的博客
10-09 622
Flex 布局中避免子元素高度被撑高。
html div没有被撑开的原因及解决办法
11-15
然而，有时我们可能会遇到一个问题，即`div`元素没有被其内部内容“撑开”，也就是说，`div`的高（height）并没有根据内容自动调整。这可能会导致`div`看起来是空的，或者部分内容被隐藏。下面我们将详细探讨这个...
浅析两列自适应布局的3种思路
09-27
本文主要探讨了在网页设计中实现两列自适应布局的三种常见方法：float、table和flex。两列自适应布局是指一列的宽度由内容决定，另一列则占据剩余的屏幕空间。这种布局方式在响应式设计中尤其重要，因为它能确保在...
[css] flex 子元素自动撑开父元素宽度
qq_14993591的博客
11-03 2960
这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。
flex:1 内容高的时候撑开容器问题
assassin_0302的博客
04-04 524
如果是横向 就在父元素中有使用flex：1的地方加上 min-width:0, 如果不行，就父元素的依次往上加。如果是纵向 就在父元素中有使用flex：1的地方加上 min-height:0，如果不行，就父元素的依次往上。
flex布局 高度没有自动撑到max-height
风吹过的博客
04-26 1554
flex竖向布局 高度无法被撑开
解决flex盒子被内容撑开以及如何显示两行文本后省略
qq_68153822的博客
06-21 2421
这个CSS属性定义了用于元素布局的盒子类型。"-webkit-box"的值是特定于基于WebKit的浏览器（如Safari和旧版本的Chrome）的。将其设置为"break-all"表示单词将在任何字符处换行，即使在单词内部，以适应指定的框内的内容。：这个CSS属性用于处理元素内的文本溢出情况。设置为"ellipsis"表示如果文本超出可用空间，将显示省略号(...)来表示截断。：这个CSS属性用来指定如何处理超出元素框的内容。将其设置为"hidden"表示超出元素尺寸的内容将被裁剪并隐藏。
如何解决flex:1撑开父元素问题
天蚕土豆丝的博客
12-14 6936
开发过程中很多时候需要一个区域自动撑开，并且在刚好撑开的区域内实现滚动，这时用flex:1去做。但实际效果很多时候会出现区域撑的过大，却没有滚动效果。 要实现4自动撑满剩余空间，并且里面的内容超出时滚动。 容器1设置 display:flex;flex-direction:column;height:100%; 容器2设置 display:flex;flex-direction:column;flex:1;overflow:auto;这里overflow:auto不会有滚动效果，只是阻止容器2被撑大，不设置
flex内容不撑开高度
05-18
如果你使用了 flex 布局，但是容器的高度没有被撑开，可以尝试以下方法： 1. 确认容器的高度是否正确设置，如果是使用百分比设置高度，需要保证父元素有高度，否则百分比无法生效。 2. 确认容器的子元素是否正确设置了 flex 属性，包括 flex-grow、flex-shrink 和 flex-basis。其中 flex-grow 属性表示子元素在空间不足的情况下会自动增长，flex-shrink 表示子元素在空间过多的情况下会自动缩小，flex-basis 表示子元素的初始大小。 3. 可以尝试使用 align-items 和 justify-content 属性来控制子元素的对齐方式和布局位置，这可能会影响到容器的高度。 4. 可以尝试使用 min-height 或者 height 属性来设置容器的最小高度或者固定高度。同时，如果容器内的子元素是绝对定位的，需要给容器设置 position: relative，否则容器的高度无法被正确计算。 希望这些方法可以帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值