Why doesn't d-flex-inline work in Chrome?

Question

css

I wanted to try to reproduce the design of VK. I'm using Bootstrap 4. Divided the page into parts using the col grid. I put pictures in blocks. Made the images responsive.

img{
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

In Firefox, everything is displayed well, but in the Chrome version: 62 pictures climb out of the borders.

<div class="col-3 mainnav" style="min-width: 150px">
                    <div class="myblock">
                        <img src="images/vkavamedium.jpg" style="padding-bottom: 5px">
                        <button class="btn btn-secondary">Редактировать</button>
                        <button class="btn btn-dark fa fa-bar-chart"></button>
                    </div>
                    <div class="myblock">
                        <button class="btn btn-secondary ">Друзья</button>
                        <button class="btn btn-dark pull-right">Updates</button>
                        <div class="photofriend" style="margin-top: 10px">
                            <div class="d-inline-flex">
                                <img src="images/friends/1.jpg">
                                <img src="images/friends/2.jpg">
                                <img src="images/friends/3.jpg">
                            </div>
                            <div class="d-inline-flex">
                                <img src="images/friends/4.jpg">
                                <img src="images/friends/5.jpg">
                                <img src="images/friends/6.jpg">
                            </div>
                        </div>
                    </div>
                </div>

.myblock{
    display: block;
    background-color: #ffffff;
    width: 90%;
    margin-bottom: 10px;
    padding: 15px;
    text-align: left;
    border-radius: 5px;
}

Answer 1

It's usually done like this:

img{
   width: auto;
   max-width: 100%;
}

Or a fixed width