div wrapper width by min content - html

Question

I make row with items. Each item contains a title, image, and button. Images keep their aspect-ratio.
I dont understand why wrapper add empty space.
Sandbox:
https://codepen.io/krosert/pen/QWNNVxg
Now result:
Expected Result:
code:
<div class="panel">
<div class="item">
<span class="title">first item</span>
<img src="https://i.ibb.co/JQMJ3BW/2311f3c1-2802-417f-9b7e-2147f066e260.jpg">
<div class="btns">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<div class="item">
<span class="title">second item</span>
<img src="https://i.ibb.co/wMyyz1n/934tvi5uykv2.jpg">
<div class="btns">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
</div>
.panel{
position: fixed;
background-color: #685;
top: 30px;
height: 200px;
display: flex;
width: 100%;
}
.item{
margin: 6px;
border: 2px solid black;
background-color: #553;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0 0 5px;
max-width: 300px;
}
img {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
min-height: 0;
min-width: 0;
}

Answer 1

remove align-items: flex-start; and add object-fit: cover; object-position: top;
to img

Answer 2

remove this line:
.items {
align-items: flex-start;
}
What you are doing is telling the items element is to push the images to the start of their parent container column. Leaving the rest of the width as empty space.
To solve the issue with the image sizes overflowing their container, set a maximum height to the .items div:
.items{
max-height: 95%;
}
Then set your images to not have a larger height than would cause it to overflow:
img {
max-height: 140px;
object-fit: contain;
}