css flex 布局子元素撑大父元素导致页面布局错乱

最新推荐文章于 2024-07-03 12:00:38 发布

躺不平的菜狗

最新推荐文章于 2024-07-03 12:00:38 发布

阅读量2.2k

点赞数 1

分类专栏：问题记录文章标签： css flex

本文链接：https://blog.youkuaiyun.com/weixin_45499478/article/details/116809934

版权

当使用CSS Flex布局时，若未设定父元素固定宽高，子元素可能会导致页面布局错乱。解决办法是在父元素样式中添加固定宽度，以避免子元素的伸展影响。参考链接：[1]https://www.cnblogs.com/shuiche/p/14502762.html [2]https://blog.youkuaiyun.com/ddyy2695734664/article/details/112761966

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因是没有给父元素设置一个固定的宽高，导致子元素 flex 的计算延伸到了父元素，给父元素设置固定的宽即可：

.main {
    /* 之前被撑大的外部父元素 */
  box-sizing: border-box;
  padding: 0 30px;
  border-right: 1px solid #ccc;
  width: 709px; /* 设置固定的宽 */
}
.albums {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

躺不平的菜狗

关注关注

1
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

Supposelll的博客

01-29

4675

当父元素设置了flex:1的情况下，想在其中子元素超出父元素高度的情况下，产生滚动条，在父元素区域滚动。但是遇到问题，当子元素高度超过父元素高度时，不会在父元素区域产生滚动条，而是超出了父元素区域，在上层产生了滚动条。

[Html]overflow: auto 失效原因,flex 1却未设置min-height &overflow的几个属性以及应用场景

最新发布

警警的博客

03-31

1020

• overflow失效核心：容器尺寸未定义、Flex 布局未限制最小尺寸、定位冲突。•流式滚动本质：动态内容更新 + DOM 操作触发滚动定位。•进阶场景：结合虚拟滚动技术（如）处理海量数据渲染。

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

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

大兵的猫

04-03

1万+

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

[css] flex 子元素自动撑开父元素宽度

qq_14993591的博客

11-03

4225

这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。

css 文本排版方向，古文式排版等

全易

10-12

1007

语法： writing-mode: horizontal-tb 或者 vertical-rl 或者 vertical-lr 或者 sideways-rl 或者 sideways-lr; 解释： horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-...

css 布局中，子组件完全占满父组件的空间

jiaojinlin的博客

11-01

4375

1、可以使用宽度百分比的形式，下面的例子是各占一半 <style> .main{ height:50px; width:200px; display:flex; } .left{ width:50% } .right{ width:50% } </style> <div class='main'> <di...

@css flex 布局子内容将父元素撑开

weixin_43809685的博客

09-01

3235

flex 布局子内容被撑开遇到的问题：需要显示的文本是通过富文本编辑器提交是文本（包含了p标签），展示时通过flex布局实现。如下图：但是通过flex布局实现后发现文本内容过长时将后半部分整体撑开了，导致整个卡片内容被撑开了解决：通过给富文本编辑器生成的p标签设置flex:1;width:0px;的方式使整个p标签的宽度由flex属性去决定（也就是有p标签的父元素宽度所决定），再通过设置溢出隐藏的css属性实现溢出隐藏。 overflow: hidden; white-space: nowra

css flex布局给子元素设置

09-06

- *1* [css flex 布局子元素撑大父元素导致页面布局错乱](https://blog.youkuaiyun.com/weixin_45499478/article/details/116809934)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

CSS之Flex布局的详细解析

qq_69748833的博客

10-19

2705

添加一个。

CSS-float浮动布局、float清除浮动与flex布局

weixin_44201223的博客

04-26

1773

float flex 清除浮动

css中间自适应布局的5种解法详解

12-14

Flex布局是现代CSS布局的标准，它允许父元素（容器）定义其子元素如何分配空间。在这个例子中，父元素设置`display: flex`，中间栏设置`flex: 1`，使得它能占据剩余的空间。Flex布局在实际开发中广泛使用，具有良好...

flex为1的时候，子元素限制一行时内容撑出父布局解决方案

隔壁小王的博客

01-12

1598

今天遇到一个问题，就是flex布局，左边宽度不定，右边填满剩余空间时，右边元素子元素内容会撑出父布局，遂记录之。 html: <div class="container"> <div class="left"> 宽度自适应 </div> <div class="right"> <div class="content"> 子元素 </div> </div> </div

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

08-19

8839

<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } ...

flex: 1； 子元素高度较高时不展示滚动条而是撑开父元素

xiaoxiannv666的博客

10-14

4015

flex布局中，flex: 1; overflow: auto;的子元素没有如期展示滚动条，而是被内容撑开高度；

html 子元素div影响父元素高度

hello world

12-21

632

问题 父元素 main 高度100% 子元素 left 和 right 高度80% 这样就导致了mian也80%高度了，不占全屏了解决 .left{ float:left; } .right{ float:right; } 加上float属性

关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）