html - 文本省略优先级

Question

我有一个带有 display flex 的容器，其中包含 2 个元素。这两个元素都有文本省略号以支持长文本。我想在元素之间设置一些优先级，以便根据需要使元素 1 成为匹配位置，为元素 2 保留一些固定空间。这意味着 - 如果容器宽度为 200 像素 - 元素 2 的最小尺寸为 50 像素，我希望元素 1 达到 150 像素(然后是文本省略号)。最好的方法是什么？

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

<div style="display:flex;width:300px">
  <div style="background-color: red;min-width: 50px;">
    <div class="ovf">item1 item1 item1</div>
  </div>
  <div style="background-color: blue;min-width: 40px;flex-shring:2">
    <div class="ovf">item2 item2 item2 item2 item2 item2 </div>
  </div>
</div>

JSFiddle

Answer 1

对齐内容:空格；

section {
   display: flex;
   width: 50%;
   justify-content: space-between;
}
section>div {
   background: #eeeeee;
   padding: 15px;
}

<section>
   <div>
      <div>Area 1</div>
   </div>
   <div>
      <div>Area 2</div>
   </div>
</section>