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

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

不，缩放元素无法影响其容器。这将涉及性能大量调整和重新计算所有相关元素，这些过渡试图减轻。通过不影响周围元素，过渡比缩放宽度，高度等具有巨大的性能优势。

如果要缩放某些内容并让其大小影响其他元素，则必须缩放字体大小，高度或宽度。虽然不言而喻，它的性能更重要。