Проблема с Flexbox, когда дочерние элементы являются кнопками с использованием соотношения сторон ⇐ CSS

[Anonymous]

Я использую flex в компоненте ввода чисел для отображения пользовательских кнопок «+» и «-» рядом с самим вводом. Кнопки используют соотношение сторон: 1/1;, чтобы гарантировать, что они всегда квадратные, но я не могу заставить контейнер кнопок соблюдать это. Вместо этого кнопки выходят за пределы контейнера, как если бы контейнер измерял их размер без свойства аспекта. Когда я удаляю это свойство, контейнер отображается в соответствующем размере.
Некоторые примеры кода:

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

.input-interior {
box-shadow: 0 1px 0 blue;
box-sizing: border-box;
display: flex;
flex-grow: 1;
position: relative;
width: 600px;
}

.input-container {
flex-grow: 1;
min-width: 0;
}

input {
appearance: textfield;
background-color: transparent;
border: none;
box-shadow: none;
box-sizing: border-box;
color: rgb(15 15 15);
height: 80px;
margin: 0;
outline: none;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
padding: 0;
width: 100%;
}

.input-actions {
box-shadow: 0 0 0 1px green;
box-sizing: border-box;
column-gap: 8px;
display: flex;
flex-shrink: 0;
padding: 8px;
}

button {
border: none;
margin: 0;
padding: 0;
aspect-ratio: 1 / 1;
min-height: 44px;
align-items: center;
display: flex;
justify-content: center;
min-width: auto;
width: auto;
}

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

-
+

Как мне получить контейнер .input-actions для уважать динамический размер своих дочерних элементов?

Подробнее здесь: https://stackoverflow.com/questions/782 ... pect-ratio