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

最新推荐文章于 2024-07-02 14:57:06 发布
最新推荐文章于 2024-07-02 14:57:06 发布
阅读量2.2w 收藏 12
点赞数 10
分类专栏： css 文章标签： flex width width100%不生效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013338742/article/details/83059618
版权

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

flex-shrink: 0;
width: 100%;

这样就可以生效了。

父元素使用flex子元素宽度100%失效问题
shi19970609的博客
09-28 1485
父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。
list组件设置flex-direction：row之后，设置的高度不生效
华为开发者联盟
05-10 2417
现象描述： list组件设置flex-direction: row之后，设置的高度height: 100px不生效，整个list高度会变的异常大。 问题代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
CSS布局说——可能是最全的
weixin_34297704的博客
09-26 657
前言 现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。 其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了...
flex布局下width：100%失效和justify-content:space-between 失效的问题
weixin_45093753的博客
08-22 1867
flex布局下width：100%失效和justify-content:space-between 失效的问题
为什么你在CSS里写的width: 100%无效？
kai212的博客
07-12 8585
为什么你写的width: 100%失效？作为一个萌新小白，学习的路上总能遇到让我意想不到的问题，最近学习弹性布局时突然发现设置的width: 100%无效而设置width: 100px则可以显示，也让我懵逼了许久
父元素flex:1,子元素宽度100%失效的问题
weixin_47813845的博客
12-02 4092
今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写： .parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; } } 但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可： .parent{
css flex:1 导致子元素 设置100% 无效
laozhong110的专栏
01-31 1万+
.parent{ display:flex; flex-direction: row; } .child1{ width:100%; //这个无效 } //修改如下 parent加上 position: relative; 子加上 position: absolute; .parent{ display:flex; flex-direction
.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; overflow: hidden; } .popup img { position: relative; top: 50%; left: 50%; max-width: 100%; max-height: 100%; cursor: zoom-in;这是我的弹窗元素，需要怎么更改呢
07-08
如果您想要使用CSS来设置弹窗的样式，可以按照以下方式更改您的弹窗元素样式： ```css .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); ...
<el-form-item label="寄件人" style="margin-left: 50px;margin-top: 20px;width: 100% "> <el-select v-model="sendAddr.sender_address" @change="sendaddrChange" placeholder="请选择寄件人" style="flex:1;width: 100%"> <el-option :label="'请选择寄件人'" :value="0"></el-option> <el-option v-for="(item, index) in getShopAddr.addr" :key="index" :label="item" :value="index"></el-option> </el-select> </el-form-item>对他设置100%不起作用怎么回事
03-15
比如，如果父容器是flex布局或者未设置固定宽度，可能导致el-select的100%宽度参考的父容器实际宽度不符合预期。 2. **CSS样式覆盖**：其他CSS样式可能覆盖了行内样式，比如框架默认的样式或者自定义的类。检查是否...
``` <div style="width: 100%"> <el-form style="background: #fff;width: 100%" :model="receiptAddr" ref="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="寄件人" style="margin-left: 50px;margin-top: 20px;width: 100% "> <el-select v-model="sendAddr.sender_address" @change="sendaddrChange" placeholder="请选择寄件人" style="flex:1;width: 100%"> <el-option :label="'请选择寄件人'" :value="0"></el-option> <el-option v-for="(item, index) in getShopAddr.addr" :key="index" :label="item" :value="index"></el-option> </el-select> </el-form-item> <div></div> <el-form-item label="姓名" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px;width: 100%"> <el-input v-model="sendAddr.sender_name" placeholder="姓名" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="联系方式" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_mobile" placeholder="联系方式" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="省市区" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_pca" placeholder="省市区" clearable style="flex:1" disabled /> </el-form-item> <br> <el-form-item label="详细地址" prop="name" size="mini" style="margin-left: 50px;margin-top: 20px"> <el-input v-model="sendAddr.sender_address" placeholder="详细地址" clearable style="flex:1" disabled /> </el-form-item> <div></div> </el-form> </div>```给宽度100%没有作用
03-15
好的，我需要解决用户的问题：为什么在给定的Vue和Element UI代码中，设置了`width: 100%`却没有生效。首先，我得仔细看看用户提供的代码片段，找出可能的原因。 首先，用户提到在`<div style="width: 100%">`这个...
<template> <view> <view class="container"> <image class="bg-img" src="/static/back.jpg"></image> <view class="content"></view> </view> <view class="box1"> <view class="sonbox1"> <image src="/static/b2.jpg" mode="scaleToFill"></image> </view> <view class="sonbox1"> <view >检测结果</view> <view>目标数目:</view> <view>目标选择：</view> <view>类型：</view> <view>置信度：</view> </view> </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style lang="scss"> .bg-img{ position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1; } .box1{ display: flex; width: 1300px; height: 700px; border: 3px solid black; margin-left: 25px; margin-top: 20px; padding-left: 45px; padding-top: 50px; .sonbox1{ width:600px; height: 400px; flex-grow: 0; //column-width: 100px; border: 2px solid red; flex:1; image{ weight:100%; //vertical-align: right; } } } </style>
最新发布
03-24
- 仅设置 `width:100%` 未同步设置 `height:100%`，导致垂直方向未填满 #### 3. **布局冲突** ```scss .sonbox1 { width:600px; // ❌ 与 flex:1 冲突 flex:1; // 实际等价于 flex:1 1 0% } ``` - `width:...
echarts的宽度100%不生效的问题
duyanli7780com的博客
07-02 1798
原因是，我在页面中使用了tab切换，这时图表的父容器div是隐藏的（display：none），图表在执行js初始化刷新的时候找不到这个元素，所以echarts就默认给自己设置了100px的宽，也就是自动将“100%”转成了“100”，最后计算出来的图表就成了100px。首先先看问题图片，我在折现图的div设置了宽度100%，但是在页面上实际只有100px宽度。echarts的宽度100%不生效的问题。
flex布局设置width无效
weixin_30808253的博客
03-12 584
子元素设置 : flex: 0 0 85px;参数: flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。 　　 该属性有两个快捷值：auto(1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 flex-gro...
display:flex布局下的子元素宽度无效
Bright2017的博客
09-03 870
加上 flex-shrink: 0; width: 120px; flex-shrink: 0;
关于Div的宽度与高度的100%设定
weixin_34221073的博客
03-13 872
正像你所知道的那样，设置DIV大小的有两个属性width和height，以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑，不明确这个100%的宽度（高度）到底有多宽有多高？这个100%是从哪里得到的从哪里继承的？今天我们的话题就是有关div高度100%的问题！ 其实，要弄懂div宽度|width100%、div高度|height100%到底是怎么实现的，只需弄懂一个简单的问题就可以了...
flex:1盒子的内部盒子高度不可设置为100%
weixin_48975022的博客
08-07 1464
如图，设置一个盒子的宽高为200px，第三个盒子设置为flex：1，效果如下可以看到第三个盒子会自动占据所有的空间，如果内容过多，则高度会更大，但是超出部分会隐藏，此时我们可以设置overflow：auto使其出现滚动条那么问题来了，我们把代码更改如下：如果此时我在第三个盒子里又放一个子盒子，然后设置子盒子的高度是100%，并且设置overflow：auto，那么子盒子的高度和父盒子是完全一样的，如果当内容超多，不也是会出现滚动条吗，但是事实却不是这样，而是直接显示出来了。
父元素flex:1子元素height:100%失效的解决办法
热门推荐
CherryCola_zjl的博客
04-21 1万+
子元素设置height:100%，会发现高度并没有变化。网上搜了半天也没解决办法，就写一下 通过设置父元素height:0; 同理 width 。这个方法还能解决 flex:1 超出省略号css失效。 这个方法safari浏览器目前还不兼容，但是chrome有效 /* 父元素 */ .parent{height:0;} 父元素 与 子元素 通过定位解决。 /* 父元素 */ .paren...
flex布局下的宽度的问题
m0_53438035的博客
07-30 5225
问题 flex布局下，宽度达到100%以上，发现无效即实际效果最多只能达到100%。 解答 我发现是我对flex布局还不够熟悉。flex布局有如下两个属性。 flex-grow属性：定义项目的放大比例 flex-shrink属性：定义项目的缩小比例 解释： 1：flex-grow属性：定义项目的放大比例。默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。 2：flex-shrink属性默认值为1，即如果空间不足将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值