Почему не работает sticky в этом случае?

Question

[X110111]

HTML

<div class="container">
  <div class="static">Static</div>

  <div class="scrollable">
    <div class="wrapper">
      <h1 class="sticky">I am sticky</h1>

      <ul>
        <li>Item of list</li>
        <!-- And many more items... -->-->
      </ul>
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.static {
  height: 60px;
  padding: 1rem;
  color: #fff;
  background-color: #000;
  flex-shrink: 0;
}

.scrollable {
  position: relative;
  display: flex;
  flex: 1;
  overflow: auto;
}

.sticky {
  position: sticky;
  top: 0;
  z-index: 1020;
}

Если я правильно понимаю, элемент с position sticky должен прилипать к ближайшему предку, у которого overflow отличается от visible. в данном случае, это элемент с классом scrollable. То есть, заголовок должен выходить за пределы враппера и прилипать к элементу с классом scrollable.
Но этого не происходит. При прокрутке, заголовок выходит за пределы видимой области и не прилипает.
Если убрать дополнительный враппер и сделать так, чтобы заголовок и список стали прямыми потомками элемента с классом scrollable, то всё работает ожидаемым образом.
Очевидно, что я что-то неправильно понимаю. Объясните, пожалуйста, почему так происходит.

Comments

[Ivan Ustûžanin]

а что во .wrapper?

[Ivan Ustûžanin]

а вообще нет, неправильно понимаете:

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

и ещё:

If the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).

если я правильно читаю, то sticky не работает из-за того, что враппер длинный

[Андрей]

так при прокрутке сам scrollable прокручивается вместе со страницей же
закиньте на codepen лучше

Answer 1

[copyhold]

я думаю, у контейнера должна быть определена высота не в процентах