гибкая термоусадка не работает вертикально

Question

Вы можете увидеть полный код здесь: https://codepen.io/typhoon93/pen/zabzyz/

Я создал гибкий контейнер с классом: contact-details-links

Ссылки внутри него с классом "profile-link", они имеют заданную высоту и ширину, а свойство flex shrink явно установлено на: 1; Ниже приведен полный код:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.contact-details-links{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    border: 1px solid green;
    height:300px;
    }
.profile-link{
    border: 1px black solid;
    height:200px;
    width: 300px;
    flex-shrink:1;
}

Когда вы начинаете уменьшать видимость страницы, чтобы поля «ссылка на профиль» начинали переполняться, они не уменьшались. Я искал последний час, но не смог найти ничего, что могло бы помочь мне здесь.

У кого-нибудь есть идеи, как это исправить?

Если я удаляю свойство height, элементы уменьшаются в размере, так что я думаю, что есть кое-что, чего я не знаю о вертикальном сжатии этих элементов.

Answer 1

Темани ответил на мой вопрос в своем комментарии, в принципе, то, что я хочу, на самом деле невозможно, только с помощью свойства flex shrink - оно работает только в направлении главной оси - то есть, так как мой flex установлен с direction: row, он только сжимается мой товар по горизонтали.

На вопрос дан ответ, я сделаю то, что хочу, с дополнительным кодом (медиазапросы) или, возможно, изменю желаемый результат.

Спасибо всем за ответы.