I'm working on my unit conversion solo project from the Scrimba Front-End developer course, and I'm struggling hard to make my text input squarish yet responsive.

I managed to make it somewhat like the Figma design, but the issue is that if the number exceeds the width it gets hidden behind the input dimensions. So my goal is to create a squarish input field that extends depending on the text width.

Does anyone have an idea on how to do it? I tried working with AI and it didn't help this time, so I'd really appreciate an advice from an experienced fellow coder. Thanks!

Here is my code: https://github.com/Loud-Environment/unit-converter. I'm struggling on the /* Styling the header */ part witch the input rules.

Pasting the code excerpt below:

HTML:

 

      
Metric/Imperial Unit Conversion
      
      Convert
    

CSS:

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