Почему гибкие элементы переполняют гибкий контейнер? ⇐ CSS

[Anonymous]

У меня есть эта HTML-форма:

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

* {
box-sizing: border-box;
}
.email-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
box-sizing: content-box;
}
.email-input {
flex: 1;
height: 3.5rem;
padding: 0 1rem;
border-radius: var(--border-radius-xl);
border: 1px solid var(--color-slate-700);
background-color: rgba(26, 14, 12, 0.5);
color: var(--color-slate-100);
font-size: 1rem;
font-family: var(--font-display);
transition: all 0.2s;
}
.btn-primary {
display: flex;
height: 3.5rem;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-xl);
background-color: var(--color-primary);
padding: 0 2rem;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--color-white);
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.email-submit {
gap: 0.5rem;
white-space: nowrap;
}

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

Śledź postępy
arrow_forward

Каким-то образом заполнение гибких элементов приводит к тому, что элементы переполняют гибкий контейнер.
Я экспериментировал и искал SO. Нашел эти вопросы:

• Почему заполнение расширяет гибкий элемент?
• Должен ли гибкий элемент переполнять гибкий контейнер вместо разрыва строк?

Но ответы на эти вопросы не помогли. Я добавлял размер поля: content-box; в форме и flex: 1 1 50%; или flex: 1 1 0 в элементах, ничего не меняет переполнение.
Я думал, что проблема может быть в фиксированном размере поля ввода. Но добавление ширины: auto; тоже ничего не изменило.
Я подумал, что, возможно, проблема в шрифте значка. Но добавление фиксированной ширины: 1em; к значкам также не имеет значения.
Это CSS шрифта значка:

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

.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
overflow: hidden;
width: 1em;
}

У меня нет идей.
Это моя страница:
https://jcubic.pl/wikizeit/#subscribe

Подробнее здесь: https://stackoverflow.com/questions/799 ... -container