如何解决flex:1撑开父元素问题

开发过程中很多时候需要一个区域自动撑开，并且在刚好撑开的区域内实现滚动，这时用flex:1去做。但实际效果很多时候会出现区域撑的过大，却没有滚动效果。
要实现4自动撑满剩余空间，并且里面的内容超出时滚动。
容器1设置 display:flex;flex-direction:column;height:100%;
容器2设置 display:flex;flex-direction:column;flex:1;height:0;height:0只是阻止容器2被撑大，不设置容器2的高度会溢出。
容器3设置 flex:1;overfow:auto;继续阻止容器被撑开，并实现4的溢出滚动。

如何解决flex:1撑开父元素问题相关推荐

子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"><div id="left1">1</div><div id=&q ...
子元素padding一般不会撑开父元素盒子大小
padding影响盒子实际大小. (盒子即使有了宽度和高度,此时在指定内边框,会撑大盒子) 如果不指定宽度,块元素随父元素的宽度. 如果子元素不设置宽度或者高度,则子元素的padding值永远不会超出 ...
子元素宽度如何撑开父元素宽度
子元素宽度如何撑开父元素宽度代码效果如下一个横向滚动栏,子元素高度会自动撑开父元素的高度,但是好像子元素宽度不能自动撑开父元素的宽度.这是我们需要使用css使子元素宽度可以自动撑开父元素宽度,避 ...
关于flex布局中,父元素高度auto，由一子元素撑开，另一子元素自适应高度问题
.expressRecord-single-close {//父元素样式 width: 100%; height: auto; display: flex; justify-content: flex ...
65、如何解决浮动引起的父元素高度塌陷
1. 父元素高度塌陷的原因父容器的高度是内部容器撑开的,当子元素元素浮动后,脱离了正常文档流,导致父容器的高度塌陷,高度变为0px. 2.如何清除浮动 1. overflow: hidden; 原理 ...
CSS：当子元素皆浮动，撑开父元素的3种方式
1. 在子元素后面补充同级的空元素,并定义清除浮动样式 html文件 <main><div><span>肥水东流无尽期.当初不合种相思.梦中未比丹青见,暗里忽惊山鸟 ...
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高
如题,本人经常设置宽高都是这种,先通过js获取父元素的宽高,别的子元素的宽高.再通过js赋值 this.height = this.$refs.xxx.offsetHeight - this.$ref ...
子元素自动撑开父元素空间
宽度 width !注意: 如果一个元素不添加width 属性,默认属性值为auto,不同的元素浏览器会根据其特点自动计算出实际宽度. 块级元素,其 width 属性的值会自动撑满父元素的 width ...
子元素无法撑开父元素的情况
如果父元素已经规定了度,不会高度塌陷,但可能会溢出(如果子元素总高度超过父元素的话) 如果父元素没有规定高度: 2.1 如果所有子元素都浮动,父元素没有高度,这时候给父元素设置边框的话,就会发现边框保 ...

如何解决flex:1撑开父元素问题

如何解决flex:1撑开父元素问题相关推荐

最新文章

热门文章