Позиция закреплена не работает с заголовками столбцов

Question

Я хочу использовать фиксированную позицию, но заметил, что если в контенте есть столбцы стиля, это не работает. Это пример, который я сделал в JSFiddle. https://jsfiddle.net/3f056yqv/

.sticky {
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
}

.content {
  height: 200px;
  background: #FFF000;
}

.min {
  width: 48%;
  vertical-align: top;
  display: inline-block;
}

.notworking {
  columns: 100px 3;
}

<div class="min">
  <div>
    <div class="sticky">Working 1</div>
    <div class="content">Content 1</div>
  </div>
  <div>
    <div class="sticky">Working 2</div>
    <div class="content">Content 2</div>
  </div>
  <div>
    <div class="sticky">Working 3</div>
    <div class="content">Content 3</div>
  </div>
</div>

<div class="min notworking">
  <div>
    <div class="sticky">Not Working 1</div>
    <div class="content">Content 1</div>
  </div>
  <div>
    <div class="sticky">Not Working 2</div>
    <div class="content">Content 2</div>
  </div>
  <div>
    <div class="sticky">Not Working 3</div>
    <div class="content">Content 2</div>
  </div>
</div>

Есть исправление для этого? Или, может быть, обходной путь?

Answer 1

Sticky не будет работать в столбце logi c. Поскольку элементы в столбце не находятся в фиксированном положении. Например, они плавают в столбце 1. 2. или 3.. Вместо столбцов можно использовать grid.

.sticky {
  position: sticky;
  top: 0;
  background: #000;
  color: #FFF;
}

.content {
  height: 200px;
  background: #FFF000;
}

.min {
  width: 48%;
  vertical-align: top;
  display: inline-block;
}

.notworking {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}

<div class="min">
  <div>
    <div class="sticky">Working 1</div>
    <div class="content">Content 1</div>
  </div>
  <div>
    <div class="sticky">Working 2</div>
    <div class="content">Content 2</div>
  </div>
  <div>
    <div class="sticky">Working 3</div>
    <div class="content">Content 3</div>
  </div>
</div>

<div class="min notworking">
  <div>
    <div class="sticky">Not Working 1</div>
    <div class="content">Content 1</div>
  </div>
  <div>
    <div class="sticky">Not Working 2</div>
    <div class="content">Content 2</div>
  </div>
  <div>
    <div class="sticky">Not Working 3</div>
    <div class="content">Content 2</div>
  </div>
</div>