scrollbar-gutter无法作用于底部滚动条的技术求助

给设置了overflow-x: auto的div添加scrollbar-gutter: stable属性后，仅在右侧生成gutter，无法在底部预留滚动条空间。滚动条显示/隐藏时，右侧输入区域高度变化，导致左侧标签与输入框错位。

核心需求是保持标签与输入框始终对齐，且整体外观不能改变：

• 良好状态：标签与输入框完全对齐
• 不良状态：滚动条出现后，输入区域被向下推，标签与输入框错位

我的思路是给标签和输入框区域都预留底部滚动条的gutter，确保无论滚动条是否显示，底部间距一致。

对容器进行180度X轴翻转，再对直接子元素执行同样翻转，将底部滚动条移至顶部。这样滚动条显示时，元素向下偏移的影响被消除，设置了justify-end的标签不会与输入框错位。

JavaScript #

function hide() {
  for (let el of document.querySelectorAll('.hide-me')) el.style.display = 'none';
}

function show() {
  for (let el of document.querySelectorAll('.hide-me')) el.style.display = 'unset';
}

CSS #

@for $i from 0 through 16 {
  .gap-#{$i} {
    gap: #{$i * 4}#{'px'} !important;
  }
}

@for $i from 0 through 16 {
  .pb-#{$i} {
    padding-bottom: #{$i * 4}#{'px'} !important;
  }
}

@for $i from 0 through 16 {
  .pa-#{$i} {
    padding: #{$i * 4}#{'px'} !important;
  }
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-shrink-0 {
  flex-shrink: 0
}

.flex-shrink-1 {
  flex-shrink: 1
}

.justify-end {
  justify-content: flex-end;
}

$repeated-section-width: 170px;

.repeated-section-width {
  width: $repeated-section-width;
}

HTML #

<div class="d-flex gap-3">
  <div class="d-flex flex-column pb-3 flex-shrink-0 justify-end gap-3" style="height: 200x;">
    <span style="height: 21px;">input label 1</span>
    <span style="height: 21px;">input label 2</span>
    <span style="height: 21px;">input label 3</span>
  </div>
  <div class="d-flex gap-3 pa-1" style="overflow-x: auto; scrollbar-gutter: stable both-edges;">
    <div class="d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
    <div class="d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
    <div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
    <div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
    <div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
    <div class="hide-me d-flex flex-column flex-shrink-0 pa-2 repeated-section-width" style="border: 2px solid black;">
      <div style="margin-bottom: 8px;">
        item info 1
        <br>
        item info 2
        <br>
        item info 3
      </div>
      <div class="d-flex flex-column gap-3">
        <input type="text" />
        <input type="text" />
        <input type="text" />
      </div>
    </div>
  </div>
</div>
<hr>
<button onclick="hide()">hide</button>
<button onclick="show()">show</button>

内容的提问来源于stack exchange，提问作者SirH3nry