【发布时间】：2017-01-08 01:39:23
【问题描述】：
我正在按照下面的示例使用弹性框，但它并不完全符合我的要求
link.
案例1：左>右
案例2：左右几乎相等并填满可用空间
情况3：左右都小于可用空间
案例4：左
在上述所有情况下，如果left >> right，它会占用整个框的宽度，'right'根本不显示。
如下图。
问题 1：如何设置 'left' 和 'right' 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;
}
}
【问题讨论】：
-
听起来像是桌子的工作！ ;-)
-
有没有办法在不使用表格的情况下做到这一点？
-
使用 CSS 使其表现得像表格（而不是 flexbox）。