flex子元素固定宽度被压缩，flex为1的宽度超出父元素显示不全

最新推荐文章于 2025-04-07 16:11:59 发布

aleluye

最新推荐文章于 2025-04-07 16:11:59 发布

阅读量493

点赞数 3

文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/aleluye/article/details/140517325

版权

当父元素的宽度为flex，子元素一个是固定宽度，一个宽度自适应占据剩下的100%时（table），变化页面宽度，会出现固定宽度被压缩，表格宽度超出

固定宽度元素增加属性 flex-shrink：0

自适应宽度 width：0；flex：1

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aleluye

关注关注

3
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

flex: 1导致子元素超出父元素

qq_31247149的博客

08-02

1018

overflow: hidden 属性则告诉浏览器，如果一个元素的内容超出了该元素的边界，浏览器应该裁剪掉超出部分的内容，而不是让内容溢出到父元素之外。这意味着任何超出元素边框的内容都将不可见。因此，即使 flex: 1 的子元素内部的内容比预期的要多，overflow: hidden 也会确保这些额外的内容不会导致视觉上的混乱或破坏布局结构。即使子元素的内容试图超出其定义的边界，overflow: hidden 也会阻止这部分内容显示出来，从而确保整个容器的外观整洁，没有溢出的内容。

【前端bug】栅格布局（grid布局）导致的父元素高度不固定，子元素设置溢出滚动失效？？？

weixin_44542404的博客

03-20

2351

实际业务场景比这个更深一点，大致这个样子，然后问题就出现了，当组件A的内容很多的时候，我期望的是内容就会在右边这个小区域内滚动，但是~现实是右边的整个区域并未展示滚动条，而是直接纵向拉伸，展示了所有的数据，直接懵掉，如下图所示。这样，层层下去之后父元素的高度就是固定的，子元素的设置了height：100%;)，但是最内层的元素的高度是不受控的，就是你塞多少东西，它的高度就是多少，然后层层再撑开父级元素。最近在实现一个前端界面的布局的时候，使用grid布局的时候碰到的一些问题，和大家探讨一下下。

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

完美解决：flex布局中设置宽度被压缩的问题

热门推荐

web_ding的博客

03-17

2万+

问题描述：在父级中设置了display:flex;父元素宽度不够的时候，子元素就算设置的宽度，也会被压缩；产生原因：当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩解决方法: 给固定宽度的元素添加flex-shrink:0 flex-shrink:0; TIPS： flex-shrink平时在使用过程中比较少见，具体查看flex-shrink链接 ...

flex 子元素固定宽度_css3系列之弹性盒子 flex

az44yao的专栏

06-07

9336

作者：杨耿 https://www.cnblogs.com/yanggeng/p/11212526.html 弹性盒子(伸缩盒) 注意，本篇会很长，非常长，因为弹性盒子的知识点比较多搜索弹性盒子的属性ctrl + F如果觉得图太小， ctrl + +键主要的属性有：(主要分两部分讲，一部分讲设置在父元素上的属性，一部分讲设置在子元素上的属性，还有最后一些简单的应用) 　　flex 　　flex-grow 　　flex-shrink 　　flex-basis ...

子元素设置flex-grow:1，却比父元素高/宽的解决方案

adamxuu的博客

01-04

1161

其实是flex布局默认min-height/min-weight:auto，导致子元素min-height为子元素的height，撑大了父元素，设置min-height:0即可恢复正常。

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

weixin_60547084的博客

03-20

1万+

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

html div 上下显示不全,flex布局滚动问题，子元素无法全部显示的解决办法

weixin_42116794的博客

06-17

2715

flex布局使用起来非常方便，对于水平垂直居中的需求，很容易就能实现。但是前不久，在做全屏弹窗遮罩登录的时候，遇到了flex布局滚动的一个问题，在此记录一下。问题重现理想情况下，当然是下面的状态，网页的高度适中，登录框垂直水平居中。但是，当调整浏览器的高度时，问题就出现了。可以看到，当网页的高度比登陆框的高度小时，哪怕滚动条已经在顶部了，也看不到登录框的顶部，如果登陆框的右上角有关闭按钮的话，那么...

flex子元素怎么固定宽度

03-13

总结来说，固定Flex子元素宽度的关键是通过设置flex-shrink和flex-grow为0，并指定flex-basis或width的值。同时注意其他可能影响尺寸的因素，如min/max-width和盒模型。在 Flex 布局中固定子元素宽度，需要理解以下...

子元素设置display: inline-flex;

04-01

前端面经-CSS篇(五）---布局（1）正常布局（Normal Flow）、display属性、flex布局

最新发布

qq_44643806的博客

04-07

956

正常布局流（normal flow）是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。HTML 元素完全按照源码中出现的先后次序显示出现在另一个元素下面的元素被描述为元素，出现在另一个元素旁边被描述为二、display属性display决定了元素在布局流中的，比如它是像段落、块级容器那样独占一行，还是像文字一样内联排布，或者干脆不显示。：一个块级元素会在其前后自动生成换行（与其兄弟块分行），默认情况下它不会与其他元素并排；：能够设置widthheightmarginpadding。

弹性布局Flex

qq_43218075的博客

05-22

603

Flex 是是什么？弹性容器(Flex container)和弹性子元素(Flex item)的相关属性

Css ︱flex: 1 & display:flex 导致的宽度失效问题

Ethan's Blog

12-02

2074

flex: 1 & display:flex 导致的宽度失效问题，通过给子元素设置 min-wdith: 0 即可解决

flex 布局时，如何固定一栏宽度?

LuckyTHP

02-26

1469

上面的样式就是固定宽度 200px。简单使用 width，可以。

探秘Flex布局下子元素宽度超出的那些烦心事

ljgllxyz的专栏

05-07

1975

嘿，小伙伴们！你们有没有遇到过用Flex布局的时候，子元素的宽度莫名其妙地超出了父元素的情况？别着急，今天我就来给大家揭秘这个问题的来龙去脉，以及一些解决方案。让我们一起来深入探讨！

设置flex:1元素的子元素无法设置超出隐藏，flex: 1；width: 0；的原理

qq_31150171的博客

01-12

3563

解决：设置flex:1元素的子元素无法设置超出隐藏假设：设置flex：1的项为A 所以，当A项的width为0时，剩余空间等于容器的宽度减去除A项以外（因为此时它的width为0），其他flex项的大小，然后把剩余空间给A项补充：width也可以不设为0，只要设置的宽度不大于剩余空间就可以，因为此时的剩余空间为 flex 容器的宽度.

flex 弹性盒子子元素宽度被压缩

优快云前端知识共享

06-14

2877

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，它还有另外一个值，就是0.

chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

aoyao9093的博客

09-30

1552

1 <div class="container"> 2 <div class="item"> 3 <div class="item-inner"> 4 <a> 5 Botón 6 </a> 7 ...

flex 子元素固定宽度_什么是flex弹性布局？为什么grid布局是二维布局且更强大？...

weixin_32572129的博客

01-19

532

是2009年W3C提出的一种布局方式，也叫做弹性布局，弹性布局的出现给盒模型提供了很大的便利性。不知不觉过去10年了。一. 如何让容器变成flexbox布局1. 父元素的设置.parent{ display: -webkit-flex; /* Safari */ display: flex;}或者成为行内flex布局.parent{ display: inline-flex;}注意：设为flexb...

【兼容性】flex:1宽度溢出；flex，width 兼容低版本火狐

Owen的博客

07-10

350

一是：设置 flex：1，目的是想要 .codeBox 占满元素的剩余空间（这里是宽度）。但是当元素内容过宽，会挤压旁边元素。二是：flex：1，width：0，在低版本的Firefox浏览器不生效。这段代码，包含了我之前解决的两个问题。