使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 ），它告诉项目只消耗空闲空间。