父元素flex:1 高度却被子元素撑开的问题

最新推荐文章于 2025-07-29 15:07:59 发布

原创

最新推荐文章于 2025-07-29 15:07:59 发布 · 5k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#css3

文章讲述了在父元素使用flex布局且子元素高度不固定时，如何让子元素超出部分在父元素区域内产生滚动条。解决方案包括设置`min-height:0`和`height:0`，问题原因是MDN中的`min-size`属性会导致父元素高度变大，影响滚动条的显示。

问题

当父元素设置了flex: 1; 的情况下，想在其中子元素超出父元素高度的情况下，产生滚动条，在父元素区域滚动。由于子元素高度不固定，故父元素设置为display: flex; flex-direction: column; 子元素设置flex: 1; overflow: auto;。但是遇到问题，当子元素高度超过父元素高度时，不会在父元素区域产生滚动条，而是超出了父元素区域，在上层产生了滚动条。

<div style="display: flex; height: 100px; width: 500px; border: red solid;">
        <div style="flex: 1; display: flex; flex-direction: column;"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

水果摊见

关注关注

19
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

flex：1元素的高度

my_web_advanced的博客

06-15

2561

当一个ul元素设置大小为100%，子元素li大于100%时，ul会变大，此时设置overflow-y ：auto; 无效先给ul设置 overflow: hidden

flex 布局左边盒子flex:1 右边盒子固定宽度被推出屏幕右侧

树上骑个猴的博客

03-21

2644

页面左右布局，左边盒子设置flex:1，左边盒子里的内容是el-table。右边盒子设定固定宽度，当左边盒子里的el-table每次在页码1和页码2之间切换的时候(我的el-table一共是2页，第二页数据少不会出现垂直滚动条，第一页数据多会出现垂直滚动条)，el-table右侧滚动条的出现和消失导致左边el-table的宽度越来越大，所以左边盒子宽度越来越大。导致右边的盒子被推出屏幕右侧边界。原因：如果左边盒子不设置宽度，左边盒子可以被子节点(el-table)无限撑开。解决方案：给左边盒子设置

参与评论您还未登录，请先登录后发表或查看评论

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

weixin_43794007的博客

11-01

3398

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

flex弹性布局子元素内容超出盒子容器高度问题

qq_41995398的博客

03-05

1061

或者一些 UI 框架（如 Element UI、Bootstrap 等）里默认给元素加了。，也可能导致子元素不出现滚动，反而把父元素高度继续向下撑开。在 Flex 布局里，默认情况下，子元素的。如果某些子元素没有重置。给相关父容器或者子容器设置。

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

hantanxin的专栏

09-18

1609

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

为何弹性布局中flex：1需配合height：0固定高度？

热门推荐

qq_42816270的博客

02-12

1万+

align-items: stretch 子元素不设置宽高，其高度与父元素高度相同

flex 布局相关问题

花铛

11-05

3681

问题：父元素无法被撑开出现横向滚动条。解决方法：分别给子元素增加属性 flex-shrink:0，确保父元素不够大时子元素不会被压缩，从而撑开父元素的宽度出现横向滚动条。

父元素flex:1时高度被子元素撑开的解决方法

weixin_46447553的博客

01-05

2841

父元素flex:1时高度被子元素撑开的解决方法

CSS：父元素的高度是由哪个子元素撑开的

weixin_54197911的博客

05-04

1114

尚硅谷网易新闻中设计：在一个a元素（display：block）中放置一个img元素与div元素，为div元素设置一个margin-top:-30px后，a元素高度发生改变。按理来说，a元素的高度应该由img元素（display：block）的高度撑开，但上图表明并非如此，那么a元素的高度究竟是由哪个子元素进行撑开的，接下来进行测试： <style> .outer1{ background-color: blue; /*

flex布局，子元素撑开父元素

大兵的猫

04-03

1万+

1.将父元素设置为display:flex时，子元素不设高度时（宽度需要设置）会默认撑开满父元素高度： 2.经典两栏布局如果child1有子元素的话，并且子元素宽度过大，会撑开child1，将child2的宽度挤压，如下：解决办法将child1的宽度设置为：width:0; ...

父级设置 flex: 0 0 auto; 宽度没有被子元素撑开

07-11

- `flex-basis: auto`：元素的初始大小基于其内容或显式设置的宽度/高度。因此，父容器设置为`flex: 0 0 auto`，意味着父容器本身不会伸缩，其大小由其内容决定（即子元素的大小）。但是，如果子元素的宽度没有被...

采用flex布局时，父元素的宽度不要被子元素撑开

03-14

### 解决 Flex 布局中父元素不被子元素撑开的问题在 CSS 的 Flexbox 布局中，当子元素的内容超出其自身的尺寸时，默认情况下可能会导致父容器自动扩展宽度以适应这些内容。如果希望控制父容器的宽度而不受子元素的...

父元素设置flex：1；子元素内容过程导致被撑开

Moon Star

05-08

2784

<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;，就可以解决 ...

css 样式问题:父盒子一直被子元素撑开导致无法滚动（无固定宽高）

q_xiao_jie的博客

04-01

410

今天写项目遇到一个问题我的项目套了很多层flex盒子且外面不知道多少层处也有个溢出显示滚动条的样式导致我后续的组件的溢出显示滚动条的样式overflow: auto失效了(主要是我没有用固定宽高的写法，固定宽高就不会产生这样的问题我是因为flex:1用多了) 一直撑开父元素 且用的滚动条一直是外面不知道多少层的滚动条 css上不知如何解决故用vue封了一个组件来临时解决一下。

flex：1；会被子元素撑开问题

CZDBGSY的博客

07-23

740

1定高后，2自适应；直接给2flex:1;如果子元素过多，会被子元素撑开，随便加一个高度就好了。

关于居中、子元素撑开父元素

weixin_43294560的博客

01-16

4726

实现父div宽高由内部元素撑开: 父div添加属性:overflow:hidden; 子元素定位时，无法撑开父元素，因为此时子元素已脱离文本流实现任意元素垂直水平居中方法(单个居中同理): position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); 移动元素自身高宽的一半，因为定位时元素有自身高宽垂直居中......

当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。

qq_38065133的博客

10-09

384

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。</title> <style> .div1 { width: 300px;