以下の画像に示す機能をどのように達成できますか？

Question

私はフレックスボックスで、以下の例を、以下のですが、それは完全に

link私の要件に適合していません。

ケース1：左>右

ケース2：利用可能な左右ほぼ等しく、空間を埋める

ケース3：左と右のスペースよりも少ないされている利用可能な

ケース4 ：left < right

上記のすべてのケースで、>> rightのままにすると、ボックスの幅全体を消費し、 'right'はまったく表示されません。

以下に示すとおりです。

質問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

あなたの結果を得るためにフレックス縮小し、最小幅の両方を調整することができます。

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

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