如何实现可滚动容器对嵌套column元素的CSS scroll-snap滚动吸附

如动图所示，我有一个大型可滚动容器，内部包含多个主区块（如Attack、Release等）。每个主区块下包含一个或多个列（Attack下有Attack time，Levels下有Threshold、Density等）。

HTML结构 #

可总结为如下结构：

<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>

需求说明 #

我期望这个大型可滚动容器可以滚动吸附到每一个小.column元素（如Attack time、Release time、Threshold、Density等）上。

已尝试方案 #

我尝试使用以下CSS样式实现该效果：

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

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

但上述配置没有生效。请问是否有纯CSS的解决方案？还是必须通过JavaScript实现？

补充说明
现有公开示例使用相同的CSS代码可以正常运行，我已修改类名简化问题场景，完整相关代码可复现当前问题。

内容的提问来源于stack exchange，提问作者T. J. Evers