我有一个带有两列的flexBox布局.
左列是固定的,而右边是可滚动的.
你怎么能这样做？
看看下面的代码：
#parent {
display: flex;
}
#left {
flex-grow: 1;
}
#left div {
position: fixed;
background: blue;
top: 0;
left: 0;
height: 100vh;
}
#right {
flex-grow: 5;
background: red;
height: 300vh;
}
<div id="parent">
<div class="child" id ="left">
<div>
ABC
</div>
</div>
<div class="child" id ="right">
DEF
</div>
</div>
解决方法
如果我了解您的要求,您需要制作正确的滚动,左边是固定的.这可以在不使用固定位置的情况下完成.
我个人也建议不要使用固定位置,除非它是绝对必要的,因为它可能在移动设备上有一些不需要的行为,并且你放弃了非定位解决方案,如flexBox提供的好处.
html,body {
margin: 0;
}
#parent {
display: flex;
height: 100vh;
}
#left {
flex-grow: 1;
background: blue;
}
#right {
flex-grow: 5;
background: red;
overflow: auto;
}
#right div {
height: 300vh;
}
<div id="parent">
<div class="child" id ="left">
ABC
</div>
<div class="child" id ="right">
<div>
DEF
</div>
</div>
</div>
