Как создать адаптивный круг с двумя строками текста в HTML и CSS? ⇐ CSS

[Anonymous]

Код: Выделить всё

body {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}

.circle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #333;
color: #fff;
font-size: 32px;
font-weight: 600;
border-radius: 50%;
padding: 20px;
aspect-ratio: 1 / 1;
}

Код: Выделить всё

2
AP


200,000
AP

Почему свойство CSS «Соотношение сторон» здесь не работает ? Когда текст внутри достаточно длинный (например, если я использую 200 000 вместо 2, это будет идеальный круг с квадратным соотношением сторон). Но мне нужно, чтобы он работал и тогда, когда текст короткий.
Я хочу избежать использования Javascript и жесткого кодирования ширины или высоты, потому что круг должен полностью реагировать на текст внутри него, и быть минимальным размером, необходимым для его отображения (при этом иметь квадратное соотношение сторон).

Подробнее здесь: https://stackoverflow.com/questions/785 ... ml-and-css