I have a list (ul) where each item (li) contains an icon and a text span. This list is nested within a container, which may not have sufficient width to accommodate it. here is the code
* { border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;}.root { display: flex; justify-content: center;}.list-container { border: 1px solid black; padding: 24px; list-style:none; display: flex; flex-direction: column;}.list-container li { border: 1px solid green; margin-top: 10px; white-space: nowrap; display: flex; align-items: center;}.icon { background: green; width: 16px; height: 16px; max-width: 100%; margin-right: 14px;}.list-container li:first-child { margin-top: 0;}.container { display: flex; flex-direction: column; align-items: center; padding: 10px; width: 50px;}<div class="root"><div class="container"><ul class="list-container"><li><img class="icon" src="https://jsfiddle.net/img/favicon.png" /><span>Hello World !!!</span></li><li><div class="icon"></div><span>JavaScript</span></li><li><div class="icon"></div><span>Rust</span></li></ul></div></div>If the width of the 'div' container is narrower than the 'ul', an odd behavior occurs. When the icon is an 'img' with a max-width of 100%, the text within the span extends beyond the bounds of the 'li'. However, if the 'img' lacks a max-width setting or is substituted with a 'div', the 'li' successfully accommodates the full width of both the icon and the span. The result can be checked here (https://jsfiddle.net/c508dz6o/1/)
I understand that I could achieve the same result using a custom list marker or other ways. However, I'm really interested in understanding the CSS rules that are causing this behavior with the image's max-width. Can anyone help me figure that out?