Whenever the browser window is resized while displaying the code provided below, I am facing an issue where the div expands to the max-width even when I do not want it to do so.
When everything fits on a single line, the layout appears fine. However, upon reducing the browser size and forcing the img elements onto two lines, there is excess space on the right side of the last image from the first line within the div. My preference is for the div not to expand to the max-width if it cannot accommodate another img on the same line. Instead, I would like the width of the div to align with the rightmost img in the container.
Sample test code:
.parent {
background: red;
max-width: 90%;
display: inline-block;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="parent">
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" />
</div>
</body>
</html>