Why my flexbox resizing images only at center content justification-CodePudding

I'm facing an issue with the flexbox. I'm trying to create a responsive grid but my images aren't resizing. Once I'm setting justify-conter:center, the image seems to respond, but if i want to place the image in another alignment it doesn't resizing in width changing on dev tools.

Any solutions to that?

.outer1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.inner1 {
    margin-left:200px;
}

<div > 
        <div >
            <img src="https://images.pexels.com/photos/12040576/pexels-photo-12040576.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="annie-spratt-QckxruozjRg-unsplash">
        </div>
        <div >
            <p>test</p>
        </div>
    </div>

CodePudding user response：

You need to set image max-width: .inner1 img { max-width:100% }

.outer1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.inner1 {
    margin-left:200px;
}
.inner1 img {
    max-width:100%
}

<div > 
        <div >
            <img src="https://images.pexels.com/photos/12040576/pexels-photo-12040576.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="annie-spratt-QckxruozjRg-unsplash">
        </div>
        <div >
            <p>test</p>
        </div>
    </div>