CSS：两个文本并排，一个适合内容，另一个缩小并溢出，直到最小宽度然后包裹

Question

我有一个标题和一个url一个接一个，我希望它们并排，直到它们适合容器宽度。当它们不能并排放置时，我希望url收缩并溢出，直到达到它的最小宽度，然后它就可以包裹。

在同一个容器中，还有其他元素，如果可能的话，我希望保持不变，表现得像内联或弹性项目。

我尝试使用flexbox实现这一点，必须有flex-wrap: wrap才能使后续元素流动，但是url会缩小并使日期元素出现在第一行（{{1 }}或扩展太多，直到它包装到以下行（flex-basis: 0）。 我尝试使用浮动和清除，但无法使其工作。

• 这是我想要实现的目标：

期望的结果

• 这是我flex-basis: some%所得到的：

flexbox未展开

• 当可用空间小于url min-width时，这就是我想要的：

url换行到下一行

以下是相关的HTML代码：

url

目前的CSS：

<div class="section" data-section="header">
    <h5 class="section-title" style="display: none;">Section title</h5>

    <div class="field" data-field="title">
        <span class="field-label" style="display: none;">Field label</span>
        <span class="field-value">
            Some variable length, possibly quite long text here
        </span>
    </div>
    <div class="field" data-field="link">
        <span class="field-label" style="display: none;">Link</span>
        <span class="field-value">
            <a href="https://www.example.com/some-path/a-variable-length-and-possibly-quite-long-url-here.html">
                https://www.example.com/some-path/a-variable-length-and-possibly-quite-long-url-here.html
            </a>
        </span>
    </div>

    <div class="field" data-field="date">
        <span class="field-label">Date</span>
        <span class="field-value">2018-05-03 00:00:00</span>
    </div>
    [...]
</div>

有什么方法可以实现这一点，而无需编辑html布局或将标题和.section[data-section=header] .field { display: inline; } .section[data-section=header] .field[data-field=title] { font-weight: 700; font-size: 1.2em; line-height: 0.8; } .section[data-section=header] .field[data-field=link] { font-weight: 600; font-size: 0.7em; white-space: nowrap; max-width: 100%; position: relative; } .section[data-section=header] .field[data-field=link] .field-value { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100% - .8em); display: inline-block; vertical-align: -.1em; } .section[data-section=header] .field[data-field=link]::before { content: "["; font-size: 1.2em; } .section[data-section=header] .field[data-field=link]::after { content: "]\000A"; white-space: pre; font-size: 1.2em; } .section[data-section=header] .field[data-field=status]::after { content: "\000A"; white-space: pre; } .section[data-section=header] .field[data-field=title]::after { content: " "; line-height: 0px; font-size: 2.8em; } 隔离到自己的容器中？