Почему инпут неправильной ширины?

Question

[Dutymy]

Здравствуйте, я хочу чтоб инпут был 30vmin в ширину - то-есть чтоб контейнер был как масимально-большой элемент -(counter) а инпут как блок, и это работает до того момента как масштаб увеличивается больше 300%. Дальше все ломается. Как я могу это исправить... сделать так чтоб инпут никогда не был самым большим элементом в блоке

<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

[Dmitry Mazikin]

Убери стили для main и все получился

Comments

[Dmitry Mazikin]

И задать vmin инпуту

[Dutymy]

Dmitry Mazikin, Спасибо, но эсли я уберу

.main {
    width: max-content;
  }

то инпут возмет себе ширину первого родителя с указаной шириной - тогда он будет 100vw (а не 30vmin)

[Dutymy]

Мне просто интересно сувществует ли универсальное решение не указывая 30vmin в .main а наследуя его у дочернего елемента .counter