Resizing images dynamically - html

Question

I have a div element on top of which I am overlaying a vertical sidebar that consists of vertically stacked svg icons. I need the sidebar to be always the same height as the parent and either shrink/grow the icons whenever the window size is changed, to fill the empty space.
I've managed to atleast keep them the same size when making the window bigger, but the sidebar refuses to shrink down from a certain point.
I think that the images won't shrink because their parent div (sidebar) doesn't shrink beyond the sum of 7 icons' heights combined. Nor does it really scale the images bigger, flexbox actually just adds more empty space as the height is increased, which at this point is okay. Actually, it would be ideal that they are not initially bigger than x, and scaling up would increase the space and scaling down would first shrink the empty space as much as possible and then shrink down the icons.
I've tried 2 Google searches pages worth of solutions, along with min-width, object-fill and others. and I can't seem to solve it - the sidebar indefinitely overflows from the parent if parent is compressed so that it's height will be less than the heights of all 7 icons combined.
.sidebar {
position: absolute;
right: 12px;
top: 0;
bottom: 0;
display: inline-flex;
flex-direction: column;
align-items: stretch;
}
.sidebar-item {
flex: 1 1 auto;
background-color: black;
position: relative;
z-index: 1;
}
.sidebar-item img {
width: 100%;
height: auto;
}
<div id="map">
<div id="sidebar" class="sidebar">
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon1" alt="icon1">
</div>
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon2" alt="icon2">
</div>
<div class="sidebar-item">
<img src="https://via.placeholder.com/150?text=icon3" alt="icon7">
</div>
</div>
</div>

Answer 1

Solved by adding these properties to sidebar-item:
display: flex;
min-width: 0;
min-height: 0;