Только нижний ряд галереи Flexbox кликабельен. ⇐ CSS

[Anonymous]

Я пытаюсь создать галерею Flexbox, которая реагирует на ширину браузера (т. е. переносит и автоматически создает строки), где вы можете щелкнуть изображение, чтобы открыть полноразмерную версию изображения на его собственной странице.< /p>
У меня возникла проблема: по какой-то причине ссылки работают (включая наведение указателя) только на изображения в нижнем ряду.

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

[url=1.png]
[img]1.png[/img]
[/url]
[url=2.png]
[img]2.png[/img]
[/url]
[url=3.png]
[img]3.png[/img]
[/url]
[url=4.png]
[img]4.png[/img]
[/url]
[url=5.png]
[img]5.png[/img]
[/url]
[url=6.png]
[img]6.png[/img]
[/url]
[url=7.png]
[img]7.png[/img]
[/url]

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

.gallery-container {
display: flex;
max-width: 90vw;
width: 750px;
flex-wrap: wrap;
justify-content: space-evenly;
}

.gallery-photo {
padding: 5px;
height: 200px;
}

У меня есть ссылка на действующий тест, показывающая ошибку/проблему: https://nickvn33.github.io/Yoshin_testbed/Gallery.html
Вы также заметите, что если скрыть фотографию в нижней строке, фотографии 4–6 станут кликабельными

Подробнее здесь: https://stackoverflow.com/questions/790 ... -clickable