Css 父容器宽度是否可以扩展到子容器'；缩放的内容大小是多少？

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

我的问题就在我做的这个浮动标签上。当标签浮动时，它将变换到适当的位置并按比例缩小

但是，它的容器保持相同的大小，从而造成很大的间隙

以下是笔中的标记：

<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\uu notch

是浮动标签的容器。当标签缩小时，它不会缩小其宽度。

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

如果您想缩放某个内容并让其大小影响其他元素，则必须缩放字体大小、高度或宽度。虽然不用说，它的性能更重