Можно ли сделать гибкую коробку с% изображений вместо пикселей?

Question

Если для ширины изображений установлено значение% с помощью flex-wrap: wrap;, гибкая обертка не работает.Я могу понять, потому что изображение остается пропорциональным окну просмотра.Когда я переключаю его на px, он работает.Есть ли способ сохранить его как%, чтобы он был плавным, но когда изображение становится меньше определенного размера, оно оборачивается?

Я пытался использовать% и px.Обертывание Flex работает для px, но не для%.

* {
        font-family: arial, sans-serif; 
        box-sizing: border-box;}

    html, body {
        margin: 0;
        padding: 0;
    }

    .flex-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: .5%;
        padding-top: 100px;
    }

    .flex-container > div {
        text-align: center;
        margin: .5%;
        width: 31%;
        padding: 0;
    }

    @media screen and (max-width:500px) {
        .column {
            width: 100%;
        }
    }

<div class="flex-container">

<div><img src="Images/Printing/Dinner Menus-01.jpg" style="max-width:100%;height:auto;" alt="Banners" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%;height:auto;" alt="Posters" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%;height:auto;" alt="Poster" /></div>
</div>