html - 为什么输入的宽度错误？

Question

我希望输入为 30vmin 宽 - 也就是说，容器作为最大元素 - （计数器），输入作为一个块，直到比例增加 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

只需删除应用于 .main 的 css .main { width: max-content; }