Как реализовать вертикальный каталог каналов?

Хочу сделать сбоку слева блок, в котором будут кружки каналов для навигации(как в дискорде короче). Как реализовать, чтобы они не ломались и оставались пропорциональными? Код выглядит примерно так:

<div class="channel-list">
  <div class="channel">
    <a href="#!">
      1 канал
    </a>
  </div>
  <div class="channel">
    <a href="#!">
      2 канал
    </a>
  </div>
</div>

Ответы (1 шт):

Автор решения: Dlazder

Я не совсем понял что ты имеешь ввиду, что значит

чтобы они не ломались и оставались пропорциональными?

Есть css свойство aspect-ratio,

aspect-ratio: 1/1

Свойство сохраняет пропорции элемента ( в данном случае 1 к 1 ), например, при изменении только ширины высота будет также меняться автоматически. Я не пробовал указывать разные значения ширины и высоты, полагаю что какое то свойство ( ширина или высота ) перестанет учитываться.

→ Ссылка