Container Queries SCSS file

I want to use a container query to detect the height of the parent div and adjust the child's height accordingly; however, after following tutorials, reading numerous blog posts, and verifying that I can implement this in browsers, I am unable to get it to fire.

I am wondering if it has something to do with the SCSS I am using…

My Code

@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 {
    /* Conatiner Query Elements */
    container-type: inline-size;
    container-name: project-action-menu;

    /* Positioning Elements */
    position: absolute;
    top: 6.09rem;
    right: 0;
    bottom: 0;
    width: 12rem;
    height: 100vh;
    display: flex;             /* enable column layout */
    flex-direction: column;
    overflow: hidden;   
    background-color: $white;
    padding: $size-5;
    z-index: 6000;
    display: flex;
    flex-direction: column;
    gap: $size-3;
    // padding-top: 2.5rem !important;
    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 setSVGStroke($secondary-01);
        @include setSVGDimensions(1rem);

        &.primary {
            background-color: $white;
            color: $primary-01;
            // @include setSVGStroke($primary-01);
            &:hover {
                background-color: rgba($primary-01, 0.16);
            }
        }

        &.success {
            background-color: $white;
            color: $support-success;
            // @include setSVGStroke($support-success);
            &:hover {
                background-color: rgba($support-success, 0.16);
            }
        }

        &.important {
            background-color: $white;
            color: $support-important;
            // @include setSVGStroke($support-important);
            &:hover {
                background-color: rgba($support-important, 0.16);
            }
        }

        &.danger {
            background-color: $white;
            color: $support-danger;
            // @include setSVGStroke($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;
    }
}

Could anyone please point me in the right direction?

I think you need to update your container to use container-type: size instead of inline-size to get the container query working based on height like this.

.project-action-menu {
  container-type: size;
  container-name: project-action-menu;
}

then your container query will fire correctly

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

you have to make sure your parent container actually has a difined height for the query to wirk (for example height: 100vh).

Also, ensure the query is not inside a selector. it should be at the root level of your SCSS file.

hope your succees.