父容器的宽度可以扩展到孩子可缩放的内容大小吗？

Question

我有一个基本问题，即缩放后的元素是否会影响其容器的尺寸以及如何做到这一点。

我遇到的问题是我制作的这个浮动标签Codepen上的问题。标签浮动后，将其转换到适当位置并按比例缩小。

但是，其容器保持相同的大小，导致很大的间隙。

这是笔上的标记：

<div class="floating-label active">
  <input class="floating-label__input" type="text" name="firstName" autocomplete="off" required placeholder=" "/>
      <div class="floating-label__outline">
        <div class="floating-label__leading"></div>

        <div class="floating-label__notch">
          <label class="floating-label__label" for="firstName">Label long text</label>
        </div>

        <div class="floating-label__trailing"></div>
      </div>
    </div>
</div>

.floating-label__notch是浮动标签的容器。缩小标签时，宽度不会缩小。

Answer 1

否，缩放元素无法影响其容器。这将涉及大量性能调整和所有相关元素的重新计算，而这些转换正试图缓解。通过不影响周围的元素，过渡在缩放宽度，高度等方面具有巨大的性能优势。

如果要缩放某些东西并使它的大小影响其他元素，则必须缩放字体大小，高度或宽度。尽管不用说它的性能更高。