Как сделать, чтобы родитель сужался, когда у дочернего scale(0)?

Question

[DenKuzmin17]

spoiler

<fieldset id="brands">
  <div class="header">
        Нажми меня
    </div>
  <div class="brands-wrapper">
    <label for="brands_0" class="">
        <input type="checkbox" name="brands" id="brands_0" value="Acura"  />
        <span>Acura</span>&nbsp;<sup>31</sup>
    </label>
    <label for="brands_1" class="">
        <input type="checkbox" name="brands" id="brands_1" value="AlfaRomeo"  />
        <span>AlfaRomeo</span>&nbsp;<sup>31</sup>
    </label>
</div>
</fieldset>

.brands-wrapper {
  transform: scale(0);
}
fieldset.active .brands-wrapper {
  transform: scale(1);
}

Как сделать, чтобы '#brands' сужался (не растягивался), когда у '.brands-wrapper' transform: scale(0); ?

Comments

[Rustam Bainazarov]

На CSS — никак. Трансформации не влияют на габариты блоков. Нужно менять width и height.