I'm having an issue with a flexbox element where I want the first child to be 100% width, which is working fine. However, this has caused the flex container to maintain its original width rather than adjusting to accommodate the first child's new width.
.flex {
display:inline-flex;
flex-wrap:wrap;
border:1px solid black;
}
.first-child {
display:inline-block;
width:100%;
padding:10px 0;
}
.image {
margin-left:5px;
}
.image:nth-child(2) {
margin-left:0;
}
img {
display:block;
}<div class="flex">
<span class="first-child">Lorem Ipsum</span>
<div class="image">
<img src="https://i.picsum.photos/id/54/300/300.jpg?hmac=LmoFB-1252dfBUuC19mSt9fePqp2CCJEY2_EL9ewdPE" />
</div>
<div class="image">
<img src="https://i.picsum.photos/id/916/300/300.jpg?hmac=lP6QL2bac_8f8XYGAVNzgf2nHPlfRUNDAiDM-Kejgpg" />
</div>The wider border on the container demonstrates the issue clearly. How can I ensure that the first child remains on its own line with 100% width while limiting the border to end at the right side of the second image?
Current situation: https://i.sstatic.net/fUYxs.jpg