Css位置固定，无法使用显示器柔性

Question

我正在尝试使用flexbox布局页面。我希望右边的孩子是固定的，左边的孩子滚动。

下面是标记。

.parent {
display: flex;
}
.child1 {
position:fixed;
order: 1;
height: 300px;
background-color: red;
}
.child2 {
order: 2;
height: 100px;
background-color: blue;
}

<div class="parent">
<div class="child1">1</div>
<div class="child2">2</div>
</div>

我想做的是在child2向下滚动时使child1保持静态。

Answer 1

也许，您希望使用position:sticky来实现布局。

这是HTML结构

<div class="parent">
<div class="child child1">Child 1 content goes here</div>
<div class="child child2">
<div class="sticky">
Child 2 content goes here
</div>
</div>
</div>

和CSS

.parent {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.child {
flex: 0 1 48%;
border: 5px solid #ececec;
}
.child1 {
font-size: 32px;
}
.child2 {
position: sticky; // will keep the position of the div stuck
top: 0; // this will specify when do you want the position sticky to take effect from the top
}

已链接代码笔https://codepen.io/backslashr/pen/abvzQmo