Контейнерные запросы SCSS -файл ⇐ CSS

[Anonymous]

Я хочу использовать контейнерный запрос, чтобы обнаружить высоту родительского DIV и соответствующим образом отрегулировать высоту ребенка; Однако, следуя учебным пособиям, чтению многочисленных постов в блоге и проверкой того, что я могу реализовать это в браузерах, я не могу заставить его стрелять.

Код: Выделить всё

@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;
}
}

может кто -нибудь указать мне в правильном направлении?

Подробнее здесь: https://stackoverflow.com/questions/796 ... -scss-file