我試圖讓一些內容盡可能地水平擴展(基于內容大小)，不換行，直到達到最大大小(比如容器寬度的40%)，此時它需要換行。如果內容高于容器，它應該溢出一個垂直滾動條。

到目前為止，我一直用flex來做這個。靈活的回答更好，但不是絕對的要求。

實際發生的情況是，當內容溢出時，滾動條不包括在flex-grow的理想內容大小的寬度計算中，因此在給定實際內容大小的情況下，滾動條會增長到預期的程度，但在計算內容換行時會考慮滾動條，因此內容會換行最后一行或兩行以適應容器減去滾動條寬度。不管內容寬度如何，也不管它是否達到最大寬度，都會發生這種情況，但是當它沒有達到最大寬度時，就會更加明顯。

請注意，在真實代碼中:

由于其他原因，內容實際上嵌套在其他幾個div(未顯示)中，但是如果沒有這些中間容器，問題似乎也可以顯示出來。 最外面的容器使用高度:100vh，但是限制在100px仍然顯示了使其溢出所需的內容較少的問題。 這是我編的一個簡單的例子:

<div style="height: 100px; display: flex; flex-direction: row; overflow: auto;">
  <div style="flex-grow: 1"></div>
  <div style="max-width: 40%; overflow: auto;">
    <p>This is some text. This is some text.</p>
    <p>This is some text.</p>
    <p>This is some text.</p>
    <p>This is some text.</p>
    <p>This is some text.</p>
    <p>This is some text.</p>
  </div>
</div>