Scroll snapping to nested components/elements

As you can see in the gif, I've got a large, scrollable container that has several main blocks ('Attack', 'Release', etc.) inside it. Each of those main blocks has one or multiple columns (under attack 'Attack time', under Levels 'Threshold', 'Density', etc)

The HTML structure can be summarized as follows:

<div class="big-scrollable">
  <div class="main-block">
    <h4>Attack</h4>
    <div class="column-container">
      <div class="column">
        <!-- Attack time -->
        <... content ...>
      </div>
      <div class="column shown-when-expanded">
        <!-- Some other column -->
      </div>
    </div>
  </div>
  <div class="main-block>
    <h4>Release</h4>
    <div class="column-container">
      <div class="column">
        <!-- Release time -->
        ...
      </div>
      ...
    </div>
  </div>
  ...
</div>

I would like the big scrollable container to snap to each small column ('Attack time', 'Release time', 'Threshold', 'Density', etc).

I tried styling the elements this way:

.big-scrollable
{
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}

.column
{
  scroll-snap-align: start;
}

But this doesn't work. Is there any pure CSS solution to this? Or will I have to solve this with JavaScript?

EDIT:

The Codepen example provided by Jonas Weinhardt does work and seems to contain the same CSS.

I've provided a bit more of the code I'm using in the following Pastebin snippets. (Note that I changed the class names to make this question a bit clearer)

Important HTML: https://pastebin.com/DjvJt8v1

Important CSS: https://pastebin.com/tmLQQhbU

from Scroll snapping to nested components/elements