容器查询（Container Queries）无法触发的问题排查求助

我最近在尝试用容器查询检测父级.project-action-menu的高度，动态调整子元素.project-action-menu-section的最大高度，但跟着教程操作、查了一堆博客，也确认浏览器支持容器查询特性，就是死活触发不了这个查询规则。我怀疑是不是自己写的SCSS哪里有问题，麻烦各位大佬帮我看看！

我的SCSS代码如下：

@import "../../../src/sass/base/color";
@import "../../../src/sass/base/animations";
@import "../../../src/sass/base/sizing";
@import "../../../src/sass/base/opacity";
@import "../../../src/sass/base/spacing";
@import "../../../src/sass/base/typography";
@import "../../../src/sass/base/shadow";

.project-action-menu { 
  /* 容器查询相关设置 */
  container-type: inline-size; 
  container-name: project-action-menu; 

  /* 布局样式 */
  position: absolute;
  top: 6.09rem;
  right: 0;
  bottom: 0;
  width: 12rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: $white;
  padding: $size-5;
  z-index: 6000;
  gap: $size-3;
  box-shadow: -0.125rem 0.1875rem 0.375rem 0 rgba(0, 0, 0, 0.25);
  transform: translateX(100%);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  &.show {
    transform: translateX(0);
  }

  .project-action-menu-close {
    position: absolute;
    top: $size-4;
    right: $size-4;
    cursor: pointer;
  }

  .project-action-menu-section {
    display: flex;
    flex-direction: column;
    gap: $size-3;
    overflow-y: auto;
    position: relative;
    z-index: 1000;
    max-height: 23rem;
    transition-property: max-height, opacity, height;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-behavior: allow-discrete;

    &::after {
      content: 'More...';
      display: flex;
      justify-content: center;
      align-items: flex-end;
      font-family: $centruiMedium;
      font-size: 0.875rem;
      color: $secondary-01;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2000;
      background: $white;
      height: $size-5;
      pointer-events: none;
      opacity: 1;
      padding-bottom: $size-5;
    }

    &:hover {
      max-height: 23rem !important;
      padding-bottom: $size-5 !important;

      &::after {
        opacity: 0;
      }
    }
  }

  .project-action-menu-divider {
    height: 1px;
    background-color: $secondary-01-lightest;
    margin: $size-3 0;
  }

  .project-action-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: $size-3;
    border-radius: $size-2;
    color: $secondary-01;
    cursor: pointer;
    font-family: $centruiMedium;
    font-size: 0.875rem;
    line-height: 0;

    &:hover {
      background-color: rgba($secondary-01-lighter, 0.16);
    }

    @include setSVGDimensions(1rem);

    &.primary {
      background-color: $white;
      color: $primary-01;

      &:hover {
        background-color: rgba($primary-01, 0.16);
      }
    }

    &.success {
      background-color: $white;
      color: $support-success;

      &:hover {
        background-color: rgba($support-success, 0.16);
      }
    }

    &.important {
      background-color: $white;
      color: $support-important;

      &:hover {
        background-color: rgba($support-important, 0.16);
      }
    }

    &.danger {
      background-color: $white;
      color: $support-danger;

      &:hover {
        background-color: rgba($support-danger, 0.16);
      }
    }
  }
}

@container project-action-menu (max-height: 700px) {
  .project-action-menu-section {
    max-height: 12.5rem !important;
  }
}

我已经检查过浏览器支持情况，也试过调整查询条件，但就是没反应。有没有可能是SCSS的嵌套写法影响了容器查询的触发？或者我在容器设置上有什么遗漏？麻烦各位帮我指个方向，谢谢！

内容来源于stack exchange