仅在空间限制需要时才灵活，并且不分配不需要的空间

Question

这是我想要完成的：

A.只要有空间，物品就应该占据它们的原始空间：

但是如果我们用完了空间，我们不希望溢出：

B. 而是在它们之间分配可用空间：

C. 但不要将不必要的空间分配给不需要的单元格；即短词应该只占用他们需要的空间，释放空间以分配给更长的词：

理想情况下，我希望同时满足 A & C，但我至少需要满足 A & B。做 A 或 C 并不难，但我不知道该怎么做两者都具有相同的标记。

下面是我用来生成这些图像的 sn-p。请注意，我通过硬编码单词特定的最大大小来实现“C”，因为我不知道如何在 CSS 中为任意单词实现该行为。

    div {
        border: 2px solid blue;
        padding: .1rem;
        margin: .1rem;
    }
    .parent {
        display: flex;
        width: 600px;
        margin-bottom: 1rem;
    }
    .child {
    }
    .test-2 > .child {
      flex: 1 0 0px;
      text-overflow: ellipsis;
      overflow: hidden;
    }

<ol type="A">
    <li>
        Items should take up their native space as long as there is room for them:
        <div class="parent">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
        </div>

        But if we run out of room, we don't want overflow:
        <div class="parent">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
            <div class="child">duck</div>
            <div class="child">counterproductivenes</div>
            <div class="child">test</div>
            <div class="child">hyperventilation</div>
        </div>
    </li>


    <li>
        Instead, distribute the available space between them:
        <div class="parent test-2">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
            <div class="child">duck</div>
            <div class="child">counterproductivenes</div>
            <div class="child">test</div>
            <div class="child">hyperventilation</div>
        </div>
    </li>


    <li>
        But don't allocate unnecessary space to cells that don't need it; i.e. short words should only take the space they need, freeing up space to be distributed to longer words:
        <div class="parent test-2">
            <!-- note: I'm pulling this off by hardcoding max widths to the cells I
                know contain short text, but I need this to work automatically with
                arbitrary text -->
                <div class="child" style="max-width: 5ch">apple</div>
                <div class="child">counterintelligence</div>
                <div class="child" style="max-width: 6ch">orange</div>
                <div class="child">antidisestablishmentarianism</div>
                <div class="child" style="max-width: 8ch">tangerine</div>
                <div class="child" style="max-width: 4ch">duck</div>
                <div class="child">counterproductivenes</div>
                <div class="child" style="max-width: 3ch">test</div>
                <div class="child">hyperventilation</div>
        </div>
    </li>
<ol>

Answer 1

您可以使用父 div 内的内联网格来完成此操作，该网格包含您的子 div 并将 grid-auto-flow 设置为 column。

div {
  border: 2px solid blue;
  padding: .1rem;
  margin: .1rem;
}

.parent {
  width: 600px;
  margin-bottom: 1rem;
}

.intermediate {
  display: inline-grid;
  grid-auto-flow: column;
  max-width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}

.child {
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="parent">
  <div class="intermediate">
    <div class="child">apple</div>
    <div class="child">counterintelligence</div>
    <div class="child">orange</div>
    <div class="child">antidisestablishmentarianism</div>
    <div class="child">tangerine</div>
  </div>
</div>

<div class="parent">
  <div class="intermediate">
    <div class="child">apple</div>
    <div class="child">counterintelligence</div>
    <div class="child">orange</div>
    <div class="child">antidisestablishmentarianism</div>
    <div class="child">tangerine</div>
    <div class="child">duck</div>
    <div class="child">counterproductivenes</div>
    <div class="child">test</div>
    <div class="child">hyperventilation</div>
  </div>
</div>