我有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;
}
}