使flex項為其文本的寬度

Question

我希望有一個包含兩列的布局，其中左列是某種側邊欄。

現在我想在側邊欄中使用一些不應該換行的文本。

當我這樣做它會導致某種溢出然后使用overflow:hidden隱藏文本的很大一部分。

如何修改左列以使用未包裝文本的寬度和右列來使用剩余空間而不丟棄overflow:hidden ？

 #container { display: flex; } #sidebar { border: 1px solid red; flex 1 auto; overflow: hidden; } #sidebar .column { white-space: nowrap; } #sidebar .column span { margin: 2px; padding: 2px; border: 1px solid green; display: inline-block; } #content { border: 1px solid black; flex: 1 100%; } 

 <div id="container"> <div id="sidebar"> <div class="column"> <span>Howdy Cowboy, some text is missing here</span> </div> </div> <div id="content"> Some funny content </div> </div> 

的jsfiddle

Answer 1

如何修改左列以使用未包裝文本的寬度和右列來使用剩余空間而不丟棄overflow:hidden ？

告訴左列只有與其內容一樣寬。

所以不是這樣的：

#sidebar {
  flex: 1 auto;            /* 1 */
  overflow: hidden;
  border: 1px solid red;
}

用這個：

#sidebar {
  flex: 0 1 auto;        /* 1 */
  overflow: hidden;
  border: 1px solid red;
}

並告訴正確的列消耗任何剩余空間。

而不是這個：

#content {
  flex: 1 100%;         /* 2 */
  border: 1px solid black;
}

用這個：

#content {
  flex: 1;              /* 2 */
  border: 1px solid black;
}

修改過的小提琴

筆記：

1. flex: 1 auto是flex-grow: 1簡寫flex-grow: 1 （已定義）， flex-shrink: 1 （默認情況下）和flex-basis: auto （已定義）。 切換到flex-grow: 0因為您不希望框擴展到內容之外。

   順便提一下， flex-grow: 0 ， flex-shrink: 1和flex-basis: auto都是默認值 。 因此，您可以省略flex規則並獲得相同的結果。

   請注意，您的代碼將不會在任何情況下工作，因為你有一個語法錯誤（缺少: ）。

2. flex-basis: 100%將強制項目在容器的寬度上盡可能多地擴展，如果可以的話甚至會侵入側邊欄空間。 只需使用flex: 1 （與flex-grow: 1 ， flex-shrink: 1 ， flex-basis: 0 ），它告訴項目只消耗空閑空間。