如何实现下图所示的功能？

Question

我使用弹性框跟随以下示例，但它并不完全符合我的要求

link

案例1：左>＆gt;右

案例2：左右几乎相等并填充可用空间

案例3：左和右小于可用空间

案例4：左＆lt;右

在所有上述情况下，如果左> gt;＆gt;是的，它消耗了盒子的整个宽度，“右”根本没有显示。

如下图所示。

问题1：如何设置“左”和“右”div的最小宽度，以便它们不会被忽视。

问题2：当左右需要超过分配的空间时，两者都必须占用50％的宽度并用省略号截断。

HTML：

    <div id='parent5' class="parent">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div id='parent5' class="parent">
  <div class="left">Lefkjasdkjsadkjhdkjsahdklksajdlksajsahdhkjsahdkjsahdkjsat</div>
  <div class="right">Rikjsadkjsahdkjsahdkjsahdkjsahdkjsahdkjsahdkjsahdksaght</div>
</div>
<div id='parent5' class="parent">
  <div class="left">Leaskjdkjsahdkjsahdkjsadkjhdsakjhdkjsahdkjsahdkjsahdkjhdkjsahdkjsaft</div>
  <div class="right">Right</div>
</div>
<div id='parent5' class="parent">
  <div class="left">Left</div>
  <div class="right">Rikjhsakjhdkjsahdkjsahdkjsahdkjsahdkjsahdkjsahdkjhsakjhdkjsahdjsadght</div>
</div>
<div id='parent5' class="parent">
  <div class="left">Lefsakdkjsahdkjsahdkjsahdkjsahdksadkjsadkjsadkjsahdsakhdkjsahdkjsahdkjsahdkjsahdkjsahdkjsahdkjsahdkjsakjsahdsat</div>
  <div class="right">Right</div>
</div>

CSS：

    .left {
    padding: 1em;
    background-color: #337ab7;
    text-align: left;
}

.right {
    padding: 1em;
    background-color: #5cb85c;
    text-align: right;    
}

.parent {
    display: flex;
    overflow: hidden;
    margin: 1em 0;
    color: #fff;
    border: 1px solid #333;
    align-items: center;
}

#parent5 {
    > div {
        flex: 1;
    }
}

Answer 1

您可以调整flex-shrink和min-width来获得结果：

＆＃13;

＆＃13;

.left {
  padding: 1em;
  background-color: #337ab7;
  text-align: left;
}
.right {
  padding: 1em;
  background-color: #5cb85c;
  text-align: right;
}
.parent {
  display: flex;
  overflow: hidden;
  margin: 1em 0;
  color: #fff;
  border: 1px solid #333;
  align-items: center;
}
.parent div {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 100px; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

<div id='parent1' class="parent">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>
<div id='parent2' class="parent">
  <div class="left">Left long long long long long long long long long long long long long long long long</div>
  <div class="right">Right</div>
</div>
<div id='parent3' class="parent">
  <div class="left">Left</div>
  <div class="right">Right long long long long long long long long long long long long long long long long</div>
</div>
<div id='parent4' class="parent">
  <div class="left">Left long long long long long long long long long long long long long long long long</div>
  <div class="right">Right long long long long long long long long long long long long long long long long</div>
</div>
<div id='parent5' class="parent">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

＆＃13;

＆＃13;

＆＃13;