显示 flex，1 个项目固定宽度，其他项目溢出并被切断 [重复]

Question

我有 2 个项目，1 个是 100px 的固定宽度，另一个填充空间。另一个项目在一行上有一个带有长文本的子项，该子项带有省略号。不幸的是，它溢出了它的父级。我怎样才能让它不超过父母？？

问题： https://jsfiddle.net/jv54f6g1/2/

我找到了一种解决方案，但我觉得它并不理想： https://jsfiddle.net/jv54f6g1/3/

代码：

<div class="a">
  <div class="b">
    <p>im a icon</p>
  </div>
  <div class="c">
    <p>im a teapot that is short and stout, here is my handle Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, mollitia, obcaecati. Amet, modi. Consequuntur sit asperiores veniam, cupiditate dolores iusto illo alias? Cupiditate, optio delectus voluptatum, ducimus nam inventore doloribus.</p>
  </div>
</div>

css

* {
  box-sizing: border-box;
}

.a {
  width: 100%;
  display: flex;
  max-width: 500px;
  border: 1px solid red;
}

.b {
  min-width: 100px;
  display: block;
}

.c {
  flex: 1;
  background: yellow;
  max-width: 100%;

  p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

Answer 1

将overflow: hidden; 添加到第二个元素 (.c)

https://jsfiddle.net/e2am9hj0/