css左右布局右侧的父级是flex:1 子集的文本设置width: 100% 超出用... 会撑爆父

最新推荐文章于 2024-07-18 11:02:55 发布

木毅01

最新推荐文章于 2024-07-18 11:02:55 发布

阅读量505

点赞数 8

分类专栏： css 文章标签： css 前端

本文链接： https://blog.csdn.net/qq_27806371/article/details/135625215

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章讨论了在使用CSSFlexbox布局时，如何通过将`v1`元素的`width`设置为0来避免`head-rig`元素因`flex:1`导致的宽度溢出问题。

摘要由CSDN通过智能技术生成

v1的width设置100% 把 head-rig 的flex: 1 撑爆了

加上width: 0 即可

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木毅01

关注关注

8
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

缚己

05-14

1867

原因是没有给父元素设置一个固定的宽高，导致子元素 flex 的计算延伸到了父元素，给父元素设置固定的宽即可： .main { /* 之前被撑大的外部父元素 */ box-sizing: border-box; padding: 0 30px; border-right: 1px solid #ccc; width: 709px; /* 设置固定的宽 */ } .albums { /* flex 布局父元素 */ width: 98%; display: flex; flex-wr

[css][移动web]flex布局的简单运用。（子盒子垂直水平居中）（圣杯布局，双飞翼布局）

belloc_li的博客

02-12

690

今天讲一下移动web最常用的flex布局。虽然flex布局方式在在pc端存在兼容性的问题，但是在移动端上就完全不用担心这个问题，可以放心使用。flex布局方式可以大大的提高编程的效率。 Flex布局弹性布局作用：基于flex精确灵活的控制块级盒子的布局方式，避免浮动布局中脱离文档流的现象发生 flex布局非常适合结构化布局设置方式给子元素最近的父元素添加 display：flex，子元素就可以自动挤压或拉伸组成部分弹性容器（父盒子）弹性盒子（子盒子）主轴（x轴）侧轴（y轴）主轴对齐

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

flex:1盒子的内部盒子高度不可设置为100%

weixin_48975022的博客

08-07

1183

如图，设置一个盒子的宽高为200px，第三个盒子设置为flex：1，效果如下可以看到第三个盒子会自动占据所有的空间，如果内容过多，则高度会更大，但是超出部分会隐藏，此时我们可以设置overflow：auto使其出现滚动条那么问题来了，我们把代码更改如下：如果此时我在第三个盒子里又放一个子盒子，然后设置子盒子的高度是100%，并且设置overflow：auto，那么子盒子的高度和父盒子是完全一样的，如果当内容超多，不也是会出现滚动条吗，但是事实却不是这样，而是直接显示出来了。

父元素flex:1,子元素宽度100%失效的问题

weixin_47813845的博客

12-02

3833

今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写： .parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; } } 但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可： .parent{

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

最新发布

aleluye的博客

07-18

284

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

【flex布局】felx: 1的子元素高度占了父元素的100%

xilejie的博客

04-14

2851

记录项目中遇到的奇奇怪怪的问题。——2020.4.14充电桩项目父元素 .listPage 使用display: flex, 子元素 .searchbox 高度有内容撑开子元素 .listbox 设置flex: 1; heighht: 100%; 可以看到纵向出现了滚动条。且高度和父元素一样。解决办法：子元素 .listbox 设置flex: 1; heighht: 100%; 改为height: 0。 ...

设置width:100%再设置margin或padding溢出的问题

liuye066的专栏

09-09

1059

第一种情况：父子组件width都设为100%，子组件中设置了margin，溢出解决方法：在父组件中加入display: inline-flex即可 <div style="width: 100%; display: inline-flex;"> <div style="width: 100%; background-color: #46b6c8; margin: 12px;">sdsdffsdfsdf===== </div> </

父元素flex:1子元素height:100%失效的解决办法

CherryCola_zjl的博客

04-21

1万+

子元素设置height:100%，会发现高度并没有变化。网上搜了半天也没解决办法，就写一下通过设置父元素height:0; 同理 width 。这个方法还能解决 flex:1 超出省略号css失效。这个方法safari浏览器目前还不兼容，但是chrome有效 /* 父元素 */ .parent{height:0;} 父元素与子元素通过定位解决。 /* 父元素 */ .paren...

html怎么设置在一个div的右侧,关于html：如何将另一个div中的2个div对齐到底部和左侧/右侧...

weixin_35618539的博客

05-30

2068

我有这个代码HTMLCSS.head {height:110px;position:relative;}.menu {float:left;position:absolute;bottom:0px;}.search {float:right;position:absolute;bottom:0px;}我想做的是将div"menu"放在div"head"的左下方，将div"search"放在div"...

父盒子设置弹性布局使子盒子垂直水平居中

博客

09-24

531

父盒子设置弹性布局使子盒子垂直水平居中。

Flex弹性盒子布局（flex-grow、flex-shrink、flex-basis）水平垂直居中、align-content、order、align-self

m0_64460142的博客

04-13

3140

1.Flex弹性盒子（flex-grow、flex-shrink、flex-basis） flex-grow：属性规定在相同的容器中，项目相对于其余弹性项目的增长量。就是否将剩余空间填满，默认值0，不填充。 flex-shrink:属性固定在相同的容器中，项目相对于其余弹性项目的收缩量。就是是否压缩，默认值1，被压缩，0，不被压缩 flex-basis:属性规定弹性...

flex1时内容溢出

JudyC的博客

11-10

2193

flex: 1 时内容溢出

flex布局百分比内容撑大盒子问题

weixin_53763249的博客

07-10

780

上面的二种方法都可以达到我们需要的效果，即给 content 设置了 flex 为 1 的时候，它会动态的获得父容器的剩余宽度，且不会被自己的子元素把内容撑开。在移动端，flex 布局很好用，它能够根据设备宽度来自动调整容器的宽度，用起来很方便，已经越来越离不开它，但是最近在做项目的时候发现一个问题。就是在一个设置了 flex:1 的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余的空间中。.notice可能会非常长，一些设备下需要隐藏显示，即不换行，并留下省略符…

解决uni-app中flex布局子元素宽度溢出

weixin_43655896的博客

02-16

4532

在如下页面中，每一行使用flex布局，每行的头像宽度指定，右侧容器使用flex:1自适应，当name过长时，右侧容器宽度溢出。页面布局如下 <view class="friend-list"> <view class="avatar"></view> <view class="wrapper-right"> <view class="wrapper-right-inner"> <view class="text"&.

解决flex布局内容超出盒子宽度问题

小漠007的专栏

12-08

7498

方案1：子项目设置flex:1;overflow:hidden; 子项目内容设置超出省略号，可以完整显示三个省略号子项目内容宽度等于子项目在线预览 #main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex; } #main div:nth-of-type(1) {flex:1;overflow:hidden;} #main div:nth-of-type(2) {flex-g

记录一个flex布局下宽度溢出且不会换行的问题

百岁如流富贵冷灰的博客

09-17

4013

最近在开发当中遇到了一个属于浏览器的bug：在flex元素下，如果子元素使用display：table并且设置宽度为100%时会出现超出flex元素的情况，并且设置flex-wrap：wrap属性也不会产生换行 <div style="display: flex;"> <div>left</div> <div style="flex: 1;display: table;width: 100%;background: red;">righ

针对flex布局下文字溢出的解决方法

weixin_67321774的博客

09-30

3219

flex布局，文字溢出

CSS3 - 让元素设定的宽度和高度不被内边距撑开（box-sizing属性说明）