html - 省略号溢出会破坏 flex 的 child 尺寸

Question

我按行显示响应，每一行都是一个带有 3 个子项的 flex 容器，由 flex-basis 分隔属性(property)。我已经向第一个 child 添加了一个文本，我想在其中使用省略号，以防它太长。然而，通过扩展第一个 flex 子元素(每行具有不同的大小，第二个和第三个子元素不在彼此的正下方)添加文本会完全破坏 View 。看起来文本长度会影响第一个 child 的扩展程度。
下面是代码的样子(或多或少):

.parent-flex {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin: 0 10px;

    .child-1 {
        min-width: 0;
        display: flex;
        flex-direction: column;
        flex-basis: 45%;
    }

    .child-1-text {
        display: flex;
        flex-wrap: nowrap;
    }

    .child-2 {
        min-width: 0;
        flex-basis: 35%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: center;
    }

    .child-3 {
        min-width: 0;
        flex-basis: 20%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: column;
    }
}

.text-with-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

<div class="parent-flex">
    <div class="child-1">
        <div>
            Text <span>Additional text</span>
        </div>
        <div class="text-with-ellipsis">
            <span>Text to be shortened with ellipsis.</span>
        </div>
        <div class="child-1-text">
            <span>X</span>
        </div>
    </div>
    <div class="child-2">
        <div class="child-2-text"></div>
        <div class="child-2-text">
            <span>Some more text</span>
        </div>
    </div>
    <div class="child-3">
        <div>...</div>
        <div>...</div>
    </div>
</div>

我正在查看与 flex 和 overflow 相关的不同案例，但似乎没有任何效果对我有用。我试过用另一个 div 用省略号包裹 div，添加 min-width: 0给它， flex-shrink和 flex-grow但这没有帮助(但也许我将它们插入了错误的位置)。
当我删除 white-space: nowrap从样式来看， child 比例恢复正常，但显然文本没有换行。
我可以确认包装的文本 div 宽度取决于内部文本的长度 - 它越长，div 越大(忽略它的父尺寸)。喜欢 clientWidth (或 scrollWidth 也许)是基于文本计算的，而不是基于所需的宽度。

Answer 1

做这个。我使用了表格而不是 div，但您必须自己添加类“.first、.second 和 .third”。 UI 非常相似，第三列会自动调整大小。
代码片段如下

table {
  --first: 45vw;
  /*width of the first column*/
  --second: 20vw;
  /*width of the second column*/
  --third: clac(abs(100vw - var(--first) - var(--second)));
  /*third column: auto resize*/
  width: 100%;
}

td {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.first {
  width: calc(var(--first) - 16px);
  max-width: calc(var(--first) - 16px);
}

.second {
  width: calc(var(--second) - 16px);
  max-width: calc(var(--second) - 16px);
}

.third {
  width: calc(var(--third) - 16px);
  max-width: calc(var(--third) - 16px);
}

<table border='1'>
  <thead>
    <tr>
      <th class='first'>Title1</th>
      <th class='second'>Title2</th>
      <th class='third'>Title3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='first'>Text Additional text</td>
      <td class='second'>Some more text</td>
      <td class='third'>Dummy text</td>
    </tr>
    <tr>
      <td class='first'>Text to be shortened with ellipsis</td>
      <td class='second'>Nice to meet you</td>
      <td class='third'>See you soon</td>
    </tr>
  </tbody>
</table>