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

[Anonymous]

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

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

:root {
--color-primary: #b42104;
--color-background-dark: #1a0e0c;
--color-slate-100: #f1f5f9;
--color-slate-400: #94a3b8;
--color-slate-500: #64748b;
--color-slate-700: #334155;
--color-white: #ffffff;
--font-display: 'Inter', sans-serif;
--border-radius-xl: 0.75rem;
--border-radius-3xl: 1.5rem;
}
.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;
}

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

.btn-primary:hover {
transform: scale(1.02);
box-shadow: 0 10px 15px -3px rgba(180, 33, 4, 0.2);
}

.btn-primary:active {
transform: scale(0.95);
}

.section-status {
padding: 6rem 0;
}

.section-container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1.5rem;
}

.status-card {
position: relative;
overflow: hidden;
border-radius: var(--border-radius-3xl);
border: 1px solid rgba(180, 33, 4, 0.2);
background: linear-gradient(to right, var(--color-background-dark), rgba(180, 33, 4, 0.2));
padding: 2rem;
}

@media (min-width: 768px) {
.status-card {
padding: 3rem;
}
}

.status-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 2rem;
}

.status-content {
flex-direction: row;
align-items: flex-start;
}

.status-text-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.status-header {
display: flex;
align-items: center;
gap: 0.75rem;
}

.status-header .material-symbols-outlined {
color: var(--color-primary);
}

.status-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-slate-100);
margin: 0;
}

.status-description {
color: var(--color-slate-400);
margin: 0;
}

.email-form-container {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 24rem;
}

.email-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}

@media (min-width: 640px) {
.email-form {
flex-direction: row;
}
}

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

.email-input::placeholder {
color: var(--color-slate-500);
}

.email-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(180, 33, 4, 0.1);
}

.email-submit {
gap: 0.5rem;
white-space: nowrap;
padding: 0 1.5rem;
}

.email-submit .material-symbols-outlined {
transition: transform 0.2s;
}

.email-submit:hover .material-symbols-outlined {
transform: translateX(0.25rem);
}

.status-bg-decoration {
position: absolute;
right: -5rem;
top: -5rem;
opacity: 0.1;
}

.status-bg-decoration .material-symbols-outlined {
font-size: 200px;
color:  var(--color-white);
}

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

[*]







construction
Projekt w trakcie wdrażania

Dołącz do naszej społeczności i bądź na bieżąco z każdą aktualizacją.





Śledź postępy
arrow_forward






code

ПРИМЕЧАНИЕ. Проблема заметна только на большом экране. Используйте расширение, чтобы обнаружить проблему.
Каким-то образом заполнение гибких элементов приводит к переполнению гибкого контейнера.
Я экспериментировал, а также искал SO. Нашел эти вопросы:

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

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

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