Как задать ширину блока (Flex + display: fixed)?

Question

[Анатолий]

Есть flex-блок aside, у которого заданы относительные размеры, допустим: flex: 1 1 40%
у этого блока есть дочерний элемент .sticky, и если ему задать display fixed, то он выходит за границы родителя aside.
Код: https://codepen.io/workcode/pen/RqwpzM
При прокрутке вниз, происходит определенное событие и блоку с классом sticky присваивается display fixed, после чего он расплывается.
Попытка задать aside определенный размер, а ширину для sticky равную inherit (задан в js) успехом не увенчалась.
Подскажите, что тут не так?

PS. блок main 100% так задумано, при дальнейшем изм. экрана.

Answer 1

[Анатолий]

Помог пример: shpargalkablog.ru/2017/07/position-fixed-parent.html

Пример

<style>
body {
  margin: 0;
  padding: 0;
}
.raz {
  max-width: 30em;
}
.raz div {
  position: fixed; /* при отсутствии свойств top, right, bottom, left элемент фиксируется на том месте окна браузера, на котором находился до прокрутки */ 
  width: 100%;
  max-width: inherit; /* наследуется значение родителя, а именно 30em */ 
}
</style>

<div class="raz">
  <div></div>
</div>

Answer 2

[Lam Besis]

Если я правильно поняла что вам нужно, то исправьте css вот так:

main {
    /* flex: 1 1 100%; */
    flex: auto;
    background-color: tan;
    height: 2000px;
}
aside {
    /* flex: 1 1 40%; */
    position: relative;
    width: 400px;
}