Flex导致设置的width:100%不生效问题

最新推荐文章于 2025-05-24 14:58:36 发布
原创 最新推荐文章于 2025-05-24 14:58:36 发布 · 2.2w 阅读 · 12 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
css

当前文章被收录于：

css
12 篇文章 0 人学习
订阅专栏 查看详情
本文介绍在已设置display:flex的父元素中，如何使子元素宽度达到100%。通过使用flex-shrink:0; 和 width:100%; 的组合，可以在flex布局中实现子元素的全宽度显示。

因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素的宽100%设置的话，可以应用下面的样式：（在该子元素上设置）

flex-shrink: 0;
width: 100%;

这样就可以生效了。

标签
#flex width #width100%不生效
flex布局下width：100%失效和justify-content:space-between 失效的问题
weixin_45093753的博客
08-22 2025
flex布局下width：100%失效和justify-content:space-between 失效的问题
flex布局常用属性总结
XiaoYi
07-21 1360
direction 控制主轴和交叉轴的方向 开始线和结束线flex-wrap-控制换行-控制主轴（横轴）上所有flex项目的对齐。-控制交叉轴（纵轴）上所有flex项目的对齐。align-self-控制交叉轴（纵轴）上的单个flex项目的对齐。-控制“多条主轴”的flex项目在交叉轴的对齐。flex-grow-分配空闲空间-分配负极空闲空间flex-basis-设置子项的宽度httpshttps。...
CSS布局说——可能是最全的
weixin_34297704的博客
09-26 696
前言 现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。 其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了...
父元素使用flex子元素宽度100%失效问题
shi19970609的博客
09-28 1678
父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。
FLEX布局
long_yy_的博客
03-14 257
FLEX布局 Flex容器：采用 Flex 布局的元素的父元素；(父级) Flex项目：采用 Flex 布局的元素的父元素的子元素；（子级） 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
Css ︱flex: 1 & display:flex 导致的宽度失效问题
Ethan's Blog
12-02 2581
flex: 1 & display:flex 导致的宽度失效问题，通过给子元素设置 min-wdith: 0 即可解决
width设置100vh但出现横向滚动条的问题
c_studer_的博客
11-23 1284
这时,滚动条会占据一定的宽度，这会导致元素的实际宽度超过视口的可见宽度，从而出现横向滚动条。body是有默认样式的, 会有一定的默认边距, 把默认边距清除就是正常的了。：子元素的宽度会根据父元素的宽度进行计算，不会超过父元素的宽度。的元素宽度也不会超过视口的可见宽度，所以不会出现横向滚动条。：父元素的宽度是视口的宽度减去滚动条的宽度（如果有滚动条）。在width中减去滚动条的宽度就可以了, 一般是17px,时，元素的宽度会占据整个视口的宽度，包括滚动条的宽度。表示元素的宽度是其父元素宽度的 100%。
为什么你在CSS里写的width: 100%无效？
kai212的博客
07-12 9201
为什么你写的width: 100%失效？作为一个萌新小白，学习的路上总能遇到让我意想不到的问题，最近学习弹性布局时突然发现设置的width: 100%无效而设置width: 100px则可以显示，也让我懵逼了许久
设置div的高度_flex下width的设置原则
weixin_29126497的博客
01-10 976
flex 是个好东西，可以帮助我们解决一般情况下布局问题，作为css3的属性特别适合用于解决一维的布局情况，比如实现 左边固定，右边自适应; 中间固定，两边自适应; 右边固定， 左边自适应, 左右高度同步等情景。今天要讲一下flex 下width的设定的一些情况，默认情况下，flex-basis 是用于设定元素的基本宽度，flex-shrink 用于设定元素的宽度缩小， flex-grow 用于设...
flex布局中 子元素宽度超出父元素导致样式问题
热门推荐
Dj19983160703的博客
06-27 1万+
近段时间，由于公司工作安排，一直没有时间更新博客，今天在写页面的时候，遇到了一些问题，做一下记录，话不多说开始。 在现在的前端样式开发中，相信大家已经对flex布局不陌生了吧，在页面布局中，所谓方便快捷，但是在开发中，我遇到一个问题： 就是在一个设置了 flex:1 的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余的空间中。由于实际项目的比较复杂，不好拿出来说，这里就把问题简化描述如下： 界面代码 小程序 css： 使用的ui框架中的样式，设置不得换行，...
flex 设置换行flex-wrap
w36680130的博客
12-29 3301
本文转载自：https://www.cnblogs.com/mjbin/p/7461816.html 作者：mjbin 转载请注明该声明。flex 设置flex-wrap 换行 本来预想的正常情况下，代码应该如下： 1 ul { 2 width: 100%; 3 display: flex; 4 flex-wrap: wrap; 5 li { 6 ...
flex（弹性盒子）：1的变化，以及flex对width的影响！
钟阿能
10-24 7258
生命不息，学习不止 在今天这个日子，祝愿所有程序员们的世界，永远没有bug 接下来，打开电脑！ 关于疑问： 弹性盒子flex：1的变化？ 弹性盒子对子元素width的影响？ 调试代码： (纯CSS实现手风琴效果) <div class="box"> <ul> <li> <span>谨防三大减肥</span> </li> <l
父元素flex:1,子元素宽度100%失效的问题
weixin_47813845的博客
12-02 4300
今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写： .parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; } } 但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可： .parent{
flex布局width设置为0，同时flex设置为1
pscool的博客
05-29 751
一个.container的div（宽度为200px，高度为200px）下，有两个直接子div（.box1和.box2），当container使用flex布局后，.box1设置为固定宽度50px，.box2设置为flex:1，占满所有剩余宽度。/* 剩余空间只有200px - 50px = 150px 了，这里设置的200px显然超出了剩余空间大小 *//* .box2设置width为0后，这个flex-shrink: 0;
hssfworkbook 设置自适应宽度_flex下width的设置原则
weixin_39844426的博客
11-29 1826
flex 是个好东西，可以帮助我们解决一般情况下布局问题，作为css3的属性特别适合用于解决一维的布局情况，比如实现 左边固定，右边自适应; 中间固定，两边自适应; 右边固定， 左边自适应, 左右高度同步等情景。今天要讲一下flex 下width的设定的一些情况，默认情况下，flex-basis 是用于设定元素的基本宽度，flex-shrink 用于设定元素的宽度缩小， flex-grow 用于设...
解决父元素设置flex:1,子元素宽度100%失效问题
weixin_47239456的博客
04-11 502
解决父元素设置flex:1,子元素宽度100%失效问题
CSS专题之flex: 1常见问题
最新发布
m0_56326830的博客
05-24 1203
本文探讨了Flex布局中flex: 1的常见问题及其解决方案。当元素设置了flex: 1却未按预期填满剩余空间，或文本溢出处理失效时，这通常是由于Flex子元素的min-width默认为auto导致的。该默认值会基于内容决定最小宽度，使得长文本可能撑开容器。解决方案是将min-width设为0，强制元素可以收缩到小于内容尺寸。文章通过实例演示了问题现象，分析了规范依据，并提供了简洁有效的修复方法。
css3 flex 布局 宽度不生效
nian_cj的博客
04-07 3017
两列布局项目中经常会用到，很多种方法可以做这样的效果 但是最方便的还是要属flex了，给外层父元素设置display:flex;然后子元素，宽度自适应的那个设置 flex-grow:1;，另外一个设置固定宽度就可以做到，一个固定另一个自适应了。 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta...
CSS：深入理解flex: ＜‘flex-grow‘＞ ＜‘flex-shrink‘＞ ＜‘flex-basis‘＞；
weixin_43932309的博客
01-19 1410
一：flex-basis 和 width之争，flex-basis完胜 二：flex简写 三：flex-grow原理 四：flex-shrink原理 五：flex-basis、min-width、max-width之争 六：flex: 1;两栏布局 七：flex: auto;
elementUI中el-table表格在flex布局下出现表格宽度一直在增大变化的问题解决方案(100%解决！！！)
DLGDark的博客
08-04 9860
解决方案： 在table外层包一层div元素，设置css宽度继承自父级宽度，添加代码：position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码：position:relative; 示例截图：
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值