Flex first child 100% width without increasing the width of the container-CodePudding

I have a flexbox element and I want the first child to be 100% width, which is working fine, however this has led to an unintended consequence which is that the width of the flex container is still taking up the width that it would be if the first child was not 100% 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 >
  <span >Lorem Ipsum</span>
  <div >
    <img src="https://i.picsum.photos/id/54/300/300.jpg?hmac=LmoFB-1252dfBUuC19mSt9fePqp2CCJEY2_EL9ewdPE" />
  </div>
  <div >
    <img src="https://i.picsum.photos/id/916/300/300.jpg?hmac=lP6QL2bac_8f8XYGAVNzgf2nHPlfRUNDAiDM-Kejgpg" />
</div>

I have added a border to the container to demonstrate how it is wider than I expect. How can I go about making sure the first child is on it's own line with 100% width while still having the border end right at the right side of the second image?

Current result:

CodePudding user response：

Use CSS grid for this:

.grid {
  display: inline-grid;
  gap: 5px;
  border: 1px solid black;
}

.first-child {
  padding: 10px 0;
  grid-column: span 2; /* update this to the number of images*/
}

img {
  display: block;
}

<div >
  <span >Lorem Ipsum</span>
  <div >
    <img src="https://i.picsum.photos/id/54/300/300.jpg?hmac=LmoFB-1252dfBUuC19mSt9fePqp2CCJEY2_EL9ewdPE" />
  </div>
  <div >
    <img src="https://i.picsum.photos/id/916/300/300.jpg?hmac=lP6QL2bac_8f8XYGAVNzgf2nHPlfRUNDAiDM-Kejgpg" />
  </div>