css - 换行文本在 flex 行中占用了太多空间

Question

在下面的列表中，一些列表项包含文本。当文本换行时，<p>元素的宽度有点过大，这会迫使蓝色方块向最右侧移动。

有没有办法让段落元素跨越最小宽度，以便文本根据需要换行而不将蓝色方块一直推到右边？

body {
  margin: 0;
}

ul {
  width: 300px;
  background: snow;
  margin: 0;
  padding: 0 0 0 30px;
}
ul li {
  display: flex;
  align-items: center;
}
ul li div {
  width: 40px;
  height: 40px;
  background: violet;
  flex: 0 0 40px;
}
ul li p {
  font-size: 24px;
  padding: 16px;
  text-align: left;
  /* flex: 0 1 calc(100% - 68px); */
}
ul li i {
  width: 28px;
  height: 28px;
  background: dodgerblue;
  flex: 0 0 28px;
}

<ul>
  <li>
    <div></div>
    <p>foo</p>
    <i></i>
  </li>
  <li>
    <div></div>
    <p>foo very much longer text here</p>
    <i></i>
  </li>
  <li>
    <div></div>
    <p>foo</p>
    <i></i>
  </li>
  <li>
    <div></div>
    <p>foo some more text here</p>
    <i></i>
  </li>
</ul>

标签： cssflexbox