Расчет фактической ширины элемента в css или стилизованном компоненте или scss

Question

Предположим, у нас изначально есть min-width: 3rem в элементе div. Но когда мы добавляем больше содержимого в div, ширина div увеличивается. Есть ли какие-нибудь уловки для вычисления фактической ширины этого div в css или s css или стилизованном компоненте.

Answer 1

В CSS есть переменная функция, позволяющая разработчикам использовать переменную ширину / высоту в собственном CSS, например, из MDN , обратите внимание также на использование cal c функция атрибута:

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
  border: 1px solid red;
  height: var(--widthA)
}

<div class="foo"></div>

Мой ответ здесь для CSS, поэтому вы можете просто указать свою ширину (или высоту события, размер шрифта, отступы, поля ... и т. Д. c), предварительно определенным в переменной, и используйте calc() для вычисления значения вашего атрибута, для SASS вы можете обратиться к документации .

также хорошо, чтобы посмотреть при совместимость для CSS переменных.