文本省略优先级

Question

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

.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>

JSFIDLE

Answer 1

找到了这样做的方法-设置第二项flex属性为1：

css lang-css prettyprint-override">.ovf {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

Answer 2

只需将flex： 1.5或2应用到第一部分（您想要更多的宽度）和flex： 1应用到另一个div以获得更小的宽度

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

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

Answer 3

证明-内容：空间-之间；

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

html prettyprint-override"><section>
   <div>
      <div>Area 1</div>
   </div>
   <div>
      <div>Area 2</div>
   </div>
</section>