I have found a situation where the width of a container doesn't follow the min-content of its elements when both max-width: 100% and flex-shrink: 0 are used on a flex child element.Flexbox seem to know that I don't want my SVG to shrink, but it ignores the final size for the flexible container when flex container equal to its min-content.
.container { border: 3px solid black; width: min-content; font-size: 50px; display: flex;}svg { display: block; max-width: 100%;}.box { flex-shrink: 0;}<div class="container"><div class="box"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="_FaHeart_15enc_28" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path></svg></div><div>Hello</div></div>This seems to have a relation with the min-width of my SVG since an SVG doesn't have one.I generally always set my image and svg to max-width 100% for better responsive design.I found this issue when trying to resize my browser as low as possible to reproduce the min-content of my flex parent.I would like to have more explantation how it really work and what would be the best practice.