html - 在 flex 容器中填充剩余的高度或宽度

Question

我在 flexbox 中并排放置了 2 个 div。右手应该始终保持相同的宽度，我希望左手只捕获剩余的空间。但它不会，除非我专门设置它的宽度。

所以目前，它设置为 96%，这看起来不错，直到您真正挤压屏幕 - 然后右侧的 div 变得有点缺乏它需要的空间。

我想我可以保持原样，但感觉不对 - 就像必须有一种方式说:

the right one is always the same; you on the left - you get everything that's left

.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>&gt;</strong>
  </div>
</div>

Answer 1

使用 flex-grow 属性使 flex 元素占用主轴上的可用空间。

此属性将尽可能地扩展元素，调整长度以适应动态环境，例如屏幕大小调整或其他元素的添加/删除。

一个常见的例子是 flex-grow: 1 或者使用简写属性 flex: 1。

因此，不要在您的 div 上使用 width: 96%，而应使用 flex: 1。

---

你写道:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

定宽div的压缩与另一个flex属性有关:flex-shrink

默认情况下， flex 元素设置为 flex-shrink: 1，这使它们能够收缩以防止容器溢出。

要禁用此功能，请使用 flex-shrink: 0。

有关详细信息，请参阅此处答案中的flex-shrink 因素部分:

• What are the differences between flex-basis and width?

---

在此处了解有关沿主轴 flex 对齐的更多信息:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

在此处了解有关沿横轴 flex 对齐的更多信息:

• How does flex-wrap work with align-self, align-items and align-content?