让柔性盒中剩余的*水平*空间填充div
我有一个flexbox中并排2个div。 右边的一个应该总是相同的宽度，我想要左边的一个只抓住剩余的空间。 但除非我专门设定宽度，否则不会。
所以目前，它被设置为96％，这看起来不错，直到你真的挤压屏幕 - 然后右手div有点饿了它所需要的空间。
我想我可以保持原样，但感觉不对 - 就像必须有一种说法：
正确的一个永远是一样的; 你在左边 - 你得到了剩下的一切
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
</strong>
</div>
<div style="width:100%; display:flex; justify-content:space-between;">
<div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
A really really really really really really really really really really really long department name
</div>
<div style="color:#555555; text-align:right; white-space:nowrap;">
Created: 21 September 2016
</div>
</div>
</div>
<div style="margin-left:8px;">
<strong>></strong>
</div>
</div> 使用flex-grow属性可使Flex项目消耗主轴上的可用空间。
此属性将尽可能扩展该项目，将长度调整为动态环境，例如重新调整大小或添加/删除其他项目。
一个常见的例子是flex-grow: 1或者使用速记属性flex: 1 。
因此，而不是width: 96%在您的div，使用flex: 1 。
你写了：
所以目前，它被设置为96％，这看起来不错，直到你真的挤压屏幕 - 然后右手div有点饿了它所需要的空间。
固定宽度div的压扁与另一个flex属性相关： flex-shrink
默认情况下，flex项目被设置为flex-shrink: 1 ，这使得它们可以缩小以防止容器溢出。
要禁用此功能，请使用flex-shrink: 0 。
有关更多详细信息，请参阅此处答案中的flex-shrink因子部分：
在此处了解更多关于沿主轴的弯曲对齐的信息：
在此处了解更多关于沿横轴进行弯曲对齐的信息：