Как установить свойство min-height для динамической ширины

Question

Я пытаюсь сделать круг (не овал) вокруг любого контента, который я добавляю в div, чтобы создать эффект значка. Я хочу, чтобы размер был динамическим в зависимости от содержимого, и я хочу использовать только CSS. Это возможно? Что у меня есть ниже.

.a-circle-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 10px solid;
  border-radius: 50%;
  padding: 30px;
  margin-top: 20px;
  font-size: 30px;
}

<div class="a-circle-badge"><span>2200</span></div>

Answer 1

Вы можете использовать псевдоэлемент , чтобы сделать height равным width для элемента, используя padding-top в процентах (обратите внимание, что заполнение рассчитывается относительно ширины для элемента).

Также я использую контейнер inline-flex, чтобы ширина элемента была равна его содержанию - см. Демонстрацию ниже:

.a-circle-badge {
  display: inline-flex; /* <-- inline flex container */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 10px solid;
  border-radius: 50%;
  padding: 30px;
  margin-top: 20px;
  font-size: 30px;
}

.a-circle-badge span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.a-circle-badge span::before {
  content: '';
  padding-top: 100%; /* <-- will create height = width */
}

<div class="a-circle-badge"><span>2200</span></div>
<div class="a-circle-badge"><span>Some text here</span></div>