关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）
创始人
2025-05-31 01:45:06
0次

文章目录

      • 1. 第一次遇到这个问题的场景
      • 2. 第二种情况
      • 3. 问题原因
      • 4. 解决方案
        • 4.1 方案一
        • 4.2 方案二

1. 第一次遇到这个问题的场景

先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压

...el-table

2. 第二种情况

很明显，红色的盒子没有300px

在这里插入图片描述

Loremipsumdolorsitametconsecteturadipisicingelit.Quasi,eveniet?

3. 问题原因

  • 首先了解一下 flex: n; 的定义，当使用单值语法的时候，可以理解为就是设置了 flex: n 1 0; 对应的 flex-grow: n; flex-shrink: 1; flex-basis: 0;，这里我们只探究 flex-grow: n;
  • flex-grow：规定了项在 flex 容器中分配剩余空间的相对比例，这里的剩余空间指的是除内容之外的空间
  • 而上面两种情况：
    • 情况一：由于 flex-grow 只能使当前元素生效，而子元素的宽度也就是当前元素的内容，在 el-table 中第一次读取宽度后，会给子元素设置固定宽度，进而导致没有剩余空间，也就是当内容空间大于剩余空间时 flex-grow: n; 就已经失效了
    • 情况二：内容的长单词没有空格，可能在解析的时候当做一个字符，所以内容的长度就是整个字符的实际长度，同样也导致了 flex-grow: n; 的失效

4. 解决方案

4.1 方案一

  • 内容盒设置 width: 0;，侧边栏正常，但是内容盒的内容会溢出，这种情况看怎么处理内容部分
  • 因为侧边栏的宽度一般都是固定的，这种处理方案虽然会有一定的取舍，但是会比原先好一些

4.2 方案二

  • 给内容盒设置 overflow-y: auto; ，这样侧边栏正常，内容盒会出现横向滚动条
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：佛经里讲的 有想无想非有想非无想 的详细解释

下一篇：做德智体美劳全面发展的社会主义建设者和接班人

相关内容

热门资讯

越来越热闹的大湾区车展：鸿蒙智... 车展首日恰逢端午节第一天，展馆内各大汽车品牌的销售人员高举促销牌来回穿梭，看展的观众人数达到了18....
那些我再也不做的事歌词是怎样的 那些我再也不做的事歌词是怎样的 那些我再也不做的事 演唱：吴克群 我们说好分手不必检讨我们说好记住...
<<金甲虫>... <<金甲虫>>中的有趣的密码 英文中以单词the出现的次数最多。可以根据这个原理察看是否有重复多次的...
中央军委原副主席许其亮逝世 新华社北京6月2日电　中国共产党的优秀党员，久经考验的忠诚的共产主义战士，无产阶级军事家，中国人民解...
ST香雪借贷纠纷：被判需偿还超... 6月2日，ST香雪（维权）（300147）发布公告，近日公司与湖北青松逾越医药有限公司的借贷纠纷案件...
18岁女孩打美容针后全身过敏住... 转自：荔枝新闻 【#18岁女孩打美容针后全身过敏住进IC...
上海端午假期全要素旅游消费金额... 观点网讯：6月2日，上海端午假日文旅市场成绩显著。全要素旅游消费金额达124.77亿元，同比增长3....
候都有哪些成语 候都有哪些成语伺间候隙、 鸡鸣候旦、 伫候佳音、 承颜候色、 恭候台积薪候燎
新股前瞻|盈利拐点遥遥无期，驭... 　　自动驾驶行业上市潮仍在继续。据披露，一家自动驾驶公司驭势科技（北京）股份有限公司（简称“驭势科技...
董事会主席钱雪明增持创胜集团(... 香港联交所最新资料显示，5月27日，董事会主席钱雪明增持创胜集团(06628)2万股，每股作价1.3...
我可以划船不用浆，我可以扬帆没... 我可以划船不用浆，我可以扬帆没有风向，因为我这一生，全靠浪！ 我我可以划船不用浆，我可以扬帆没有风向...
昆仑决每周几直播 几点 什么卫... 昆仑决每周几直播 几点 什么卫视江苏卫视每周六下午3：00
职场人想强大自己如何立志？ 职场人想强大自己如何立志？职场人做强做大自己。就要励志。，树立远大的理想和目标。明白目标和理想的实现...
三国平阳是哪里 三国平阳是哪里平阳郡是三国时期魏国设立的，在今天的山西临汾一带
男孩做亲子鉴定后被遗弃幼儿园，... 男孩做亲子鉴定后被遗弃幼儿园，现在人的婚姻到底怎么了？男子跟自己的儿子做完亲子鉴定之后，就将孩子遗弃...
游戏王卡组，，，虽然已经过时，... 游戏王卡组，，，虽然已经过时，谁帮我组一下，要有黑魔导和黑魔导女孩，卡牌40张说实话游戏是很菜的他能...
【魔兽世界】里的 [便携黑洞]... 【魔兽世界】里的 [便携黑洞] 24格包包在哪里买？有声望要求没有？沙塔斯天涯旅店，有个女招待哈莉丝...
合肥市创业免息政策,合肥创业补... 持卡人信用卡逾期后，大部分持卡人将面临高额罚息和银行催收。在巨大的还款压力和频繁的催收中，很多持卡人...
CITIC Securitie... 香港联交所最新资料显示，5月27日，CITIC Securities Company Limited...
红楼梦中鸳鸯是谁的丫鬟 红楼梦中鸳鸯是谁的丫鬟《红楼梦》中鸳鸯是贾母的丫鬟。一、鸳鸯的身份和地位在《红楼梦》中，鸳鸯是贾母的...