设置max-width时图片宽度的表现及嵌套列表在窄容器中的布局问题咨询

嘿各位，我最近碰到个布局小麻烦，想请大家帮忙看看。我做了一个列表，每一项里都有个小图标和一段文本，这个列表被放在一个容器里，但这个容器的宽度有时候可能不够，结果布局就出问题了。

先给大家看看我目前写的代码：

CSS 代码 #

* {
  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;
  /* 这里代码没写完，我原本是想限制容器宽度，比如加个max-width */
}

大概的HTML结构 #

<div class="root">
  <div class="container">
    <ul class="list-container">
      <li>
        <div class="icon"></div>
        <span>这是一段可能比较长的文本内容，测试窄容器下的表现</span>
      </li>
      <li>
        <div class="icon"></div>
        <span>另一段测试文本</span>
      </li>
    </ul>
  </div>
</div>

我的疑问主要有这几点：

• 当给.container设置了max-width之后，图标设置的max-width:100%会怎么表现？会不会被压缩变形？
• 因为列表项设置了white-space: nowrap，当容器宽度不够时，文本会溢出容器，有没有办法让文本自动换行，同时保持图标和文本的对齐？
• 有没有更好的方式来处理这种窄容器下带图标的列表布局，保证整体的美观性？

麻烦各位大佬给点思路或者解决方案，谢谢啦！

备注：内容来源于stack exchange，提问作者Wilbur Hu