Css положение исправлено, не работает с дисплеем flex

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>

Я хочу сделать child1 stati c, пока child2 прокручивается вниз.

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