Behandeln Sie die Texteingabebreite und machen Sie sie reaktionsfähig ⇐ CSS

[Anonymous]

Ich arbeite an meinem Einzelprojekt zur Einheitenumrechnung aus dem Scrimba-Front-End-Entwicklerkurs und habe große Mühe, meine Texteingabe quadratisch und dennoch reaktionsfähig zu gestalten.
Ich habe es geschafft, es in etwa dem Figma-Design zu ähneln, aber das Problem ist, dass, wenn die Zahl die Breite überschreitet, sie hinter den Eingabeabmessungen verborgen wird. Mein Ziel ist es also, ein quadratisches Eingabefeld zu erstellen, das sich je nach Textbreite erweitert.
Hat jemand eine Idee, wie das geht? Ich habe versucht, mit KI zu arbeiten, aber dieses Mal hat es nicht geholfen, daher würde ich mich sehr über einen Rat eines erfahrenen Programmierkollegen freuen. Danke!
Hier ist mein Code: https://github.com/Loud-Environment/unit-converter. Ich habe Probleme mit dem /* Styling des Headers */-Teils mit den Eingaberegeln.
Fügen Sie den folgenden Codeauszug ein:
HTML:

Code: Select all

 
Metric/Imperial Unit Conversion

Convert

CSS:

Code: Select all

/* 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;
}