Why is the input the wrong width?

Question

css

Hello, I want the input to be 30vmin wide - that is, the container to be like the maximum-large element - (counter) and the input to be a block, and this works until the scale increases more than 300%. Then everything breaks down. How can I fix this... make it so that the input is never the largest element in the block

<div class="main">
  <div class="counter"></div>

  <input type="range" />

</div>
<style>
  .main {
    width: max-content;
  }

  .counter {
    width: 30vmin;
  }

  input {
    width: 100%;
  }
</style>

Answer 1

Remove the styles for main and everything turned out