Обработка ширины ввода текста и обеспечение его отзывчивости ⇐ Html

[Anonymous]

Я работаю над своим индивидуальным проектом преобразования единиц измерения из курса разработчиков Scrimba Front-End и изо всех сил стараюсь сделать ввод текста квадратным, но при этом отзывчивым.
Мне удалось сделать его чем-то похожим на дизайн Figma, но проблема в том, что если число превышает ширину, оно скрывается за входными размерами. Итак, моя цель — создать квадратное поле ввода, которое расширяется в зависимости от ширины текста.
Есть ли у кого-нибудь идеи, как это сделать? Я пробовал работать с ИИ, но на этот раз это не помогло, поэтому буду очень признателен за совет опытного коллеги-программиста. Спасибо!
Вот мой код: https://github.com/Loud-Environment/unit-converter. Я борюсь с частью /* Стилизация заголовка */, связанной с правилами ввода.
Вставка фрагмента кода ниже:
с вводом


без ввода

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

/* Styling the header */

body {
background-color: var(--background--);
color: var(--main-text--);
font-family: "Inter", sans-serif;
}

enter image description here header {
background-color: var(--accent-background--);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5em;
}

h1 {
font-size: calc(1.5rem + 1vh);
margin: 1em 1em 0;
}

input {
background-color: var(--accent-background--);
border: 2px solid var(--border-color--);
border-radius: 5px;
font-size: calc(3rem + 1vh);
font-weight: bold;
text-align: center;
flex: 1 auto auto;
width: 25vw;
text-wrap: wrap;
max-width: max-content;
display: block;
}

button {
background-color: #ffffff;
color: #3d3d3d;
font-size: calc(1rem + 1vh);
margin-bottom: 2em;
padding: 0.4em 1.5em;
border: 1px solid #ffffff;
border-radius: 5px;
}

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

Metric/Imperial Unit Conversion

Convert

Подробнее здесь: https://stackoverflow.com/questions/798 ... responsive