Почему на ссылке не работает max-width?

Question

[Bob Clapton]

Как сделать что-бы ссылка масштабировалась по ширине при уменьшении вьюпорта браузера?
когда ставлю max-width, все ломается...
Подскажите как правильно это сделать?

<div class="container">
          <ul class="customers-list">
            <li class="customers-list__card">
              <a class="customers-list__link" href="">
                <svg width="41" height="47">
                  <use
                    href="./images/svg_sprite/sprite.svg#icon-company-1"
                  ></use>
                </svg>
              </a>
            </li>
          </ul>
     </div>

.customers-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    @extend %list;
    margin: 0;
    padding: 0;
}

.customers-list__card {
    margin-top: 30px;

    &:nth-child(-n + 2) {
        margin-top: 0
    }
}

.customers-list__link {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 210px;
    height: 92px;
    fill: #AFB1B8;
    border: 1px solid #AFB1B8;
    border-radius: 4px;
    cursor: pointer;
}

Comments

[Дмитрий Кузнецов]

max-width: 210px;
Скорей всего мешает это в ссылке. К тому-же нужно указать @media запросы, что бы они как-то изменялись при изменении размера экрана.

[Ankhena]

С тем кодом, который вы выложили ссылка имеет ширину 43px (ширина иконки + границы).
Куда и как она должна уменьшаться?

Сделайте песочницу на codepen.io с видимой проблемой и опишите желаемое поведение.

Как сделать что-бы ссылка масштабировалась по ширине при уменьшении вьюпорта браузера?
когда ставлю max-width, все ломается...

max-width это максимальная ширина и не очень понятно, какое отношение это свойство должно иметь к уменьшению размера по вашей версии.