仅在空间限制需要时才进行Flex，并且不会分配不需要的空间

Question

这是我想要完成的事情：

A。只要有足够的空间，项目就会占用原生空间：

但如果我们没有房间，我们不想要溢出：

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

C。但是，不要为不需要它的细胞分配不必要的空间;即短语应该只占用他们需要的空间，释放空间以分配给更长的单词：

理想情况下，我想满足A＆amp; A; C同时，但我需要至少满足A＆amp; B.做一个或 C并不难，但我不知道如何使用相同的标记来做这两件事。

下面是我用来生成这些图片的代码段。请注意，我实施了＆＃34; C＆＃34;通过硬编码特定于字的最大尺寸，因为我不知道如何在CSS中为任意单词实现该行为。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;