Important HTML

I'm using Vue to render nested components, like "structure-menu"
I've removed all the unrelated stuff and all the Vue component arguments, as these are not really important

<!-- Template for a controlgroup (the entire thing under "Band controls" in the gif from the question) -->

      <div class="entire-controlgroup">

      <ul class="controlgroup-nav">
        <!-- Unrelated code to render the row of navigation buttons -->
      </ul>

      <div class="controlgroup-wrapper">
        <div class="controlgroup-menus"> <!-- This is the .big-scrollable class from the question -->
          <structure-menu v-for="(menu, index) in controlGroupContents"/>
        </div>

        <structure-menu class="controlgroup-complement"/>
      </div>
      </div>

<!-- Template for a structure-menu (the .main-block from the question) -->
      <div class="settings-menu">
        <h4>{{ header }}</h4>
        <div class="menu-columns"> <!-- .column-container from the question -->
          <div v-for="column in columns" class="menu-contents">
            <structure-widgetlike v-for="(widgetlike, index) in column.menuWidgets"/><!-- Not very important -->
          </div>
        </div>
      </div>