今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写：
.parent{
flex:1;
width: 0;
.children{
width: 100%;
overflow-x:scroll ;
}
}
但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可：
.parent{
flex:1;
width: 0;
.children{
width: 100%;
overflow-x:scroll ;
display: -webkit-box;
}
}
父元素flex 1时，子元素撑开父元素的原始宽度/高度 场景：当元素A是flex 1布局时，仅能决定该元素A撑到父...
单行省略号无效问题 flex元素自身text-overflow失效，改为父元素flex，子元素text-overf...
在日常开发中可能会遇到父元素设置flex布局，子元素再去设置宽度无效的问题 当子元素的宽度总和小于父元素的宽度的时...
flex布局 父元素设置 display:flex，固定元素设置固定的宽度和高度，另一个元素设置flex:1;宽度...
1、父子元素高宽问题 未指定父元素宽度，指定子元素宽度后，chrome下父元素div的宽度等于子元素宽度撑起的宽度...
父元素设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 父元素称为“...
实现轮播图思路 布局： 1. 使用 flex 布局使子元素水平排列； 2. 子元素宽度设置100%，flex-sh...
1、往左浮动，给每个元素宽度设置为33.3%，每个元素往左浮动2、父元素设置弹性盒子，子元素3个都是flex:13...
父元素使用display：flex 子元素：flex：1 .flexBox{ ...
width: 100% 注意width：100%是子元素的content的宽度等于父元素content的宽度。 c...
本文标题：父元素flex:1,子元素宽度100%失效的问题
本文链接：https://www.haomeiwen.com/subject/salcodtx.html
网友评论