Gorilka
Gorilka

Reputation: 514

Why is the input the wrong width?

I want the input to be 30vmin wide - that is, so that the container is as the largest element - (counter) and the input as a block, and this works until the scale is increased by more than 300%. Then everything breaks down. How can I fix this ... make sure 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>

Upvotes: 0

Views: 242

Answers (1)

rozhan
rozhan

Reputation: 341

just delete the css apllied to .main .main { width: max-content; }

Upvotes: 2

Related Questions