CSS липкая позиция с вложенными элементами

Question

Насколько я знаю, липкая позиция прилипает к контейнеру, прежде чем выйти из кадра.

Моя проблема в том, что у меня есть несколько вложенных контейнеров и липкий элемент внутри них, и я хочу, чтобы они придерживались его прародителя.

Можно предположить, что я бы запустил свой внутренний липкий дочерний элемент, но проблема в том, что он должен оставаться внутри своего родителя, потому что родительский элемент - это flexbox, содержащий два элемента, и я хочу, чтобы один из этих элементов был липким, в то время как другой мог прокручиваться при переполнении.

Пример HTML:

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>

И стиль:

.inner-container {
  display: flex;
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 0;
}

Скажем так main-container прокручиваемый и inner-container прокручивается через это.

Я знаю, что нет никакого ясного решения, поддерживаемого css, вопрос в том, есть ли хитрость, чтобы справиться с этим.

Answer 1

Не уверен, что вы пытаетесь сделать, но это где-то рядом с тем, что вам нужно?

.inner-container {
  display: flex;
  flex-direction: row;
}

.sticky {
  position: sticky;
  top: 0;
  width: 100px;
  height: 30px;
  justify-self: flex-start;
  background-color: green;
}

.non-sticky {
  background-color: blue;
  width: 100%;
  flex-grow: 5;
  flex-shrink: 5;
}

.main-container {
  height: 140px;
  overflow: scroll;
}

.inner-container {
  height: 300px;
}

<div class="main-container">
  <div class="inner-container">
    <div class="sticky">sticky child</div>
    <div class="non-sticky">non-sticky child</div>
  </div>
</div>