导致第一个 div 基于第二个 div 的宽度溢出

Question

我有两个并排放置的 div 元素。我希望左 div 占用右 div 宽度的剩余空间。

.text {
  display: inline;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-color: red;
}

.icon {
  display: inline-block;
  width: 92px;
  background-color: green;
}

.information {
  width: 200px;
}

<div class="information">
  <div class="text">Text Here</div>
  <div class="icon">Image Here</div>
</div>

我尝试过的一切都会导致图标 div 根据文本剩余的空间调整大小/溢出。

但如果图标 div 的宽度更大，我希望我的文本 div 溢出。有没有办法做到这一点？

我无法设置宽度（使用 less 或 calc(totalWidth - iconWidth)） 对于文本 div，因为图标 div 的宽度可以变化，我不知道它的值可能是什么（图标宽度的值是在 mixin 中计算的）。

小提琴链接：https://jsfiddle.net/fdur0wd1/

Answer 1

在父级上使用flex，并将.text 设置为flex-grow: 1（或简称flex: 1 0 0）

.text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background-color: red;
    flex: 1 0 0;
}

.icon {
    width: 92px;
    background-color: green;
}

.information {
    width: 200px;
    display: flex;
}

<div class="information">
    <div class="text">Text Here</div>
    <div class="icon">Image Here</div>
</div>