Может ли ширина родительских контейнеров увеличиваться до размера дочернего содержимого?

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

Нет, масштабированный элемент никак не может повлиять на его контейнер.Это может привести к значительному изменению производительности и пересчету всех связанных элементов, которые переходы пытаются смягчить.Не влияя на окружающие элементы, переходы имеют огромное преимущество в производительности по сравнению с шириной, высотой и т. Д.

Если вы хотите масштабировать что-то и позволить его размеру влиять на другие элементы, вам нужно масштабировать размер шрифта, высоту или ширину.Хотя само собой разумеется, что это более тяжелая производительность.