使弹性项目成为其文本的宽度

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;
}

revised fiddle

注意事项：

1. flex: 1 auto 是flex-grow: 1（已定义）、flex-shrink: 1（默认）和flex-basis: auto（已定义）的简写。切换到flex-grow: 0，因为您不希望框超出内容。

   顺便提一下，flex-grow: 0、flex-shrink: 1 和 flex-basis: auto 都是 default values。因此，您可以省略 flex 规则并获得相同的结果。

   请注意，您的代码在任何情况下都不起作用，因为您有语法错误（缺少:）。

2. flex-basis: 100% 将强制项目在容器的宽度上尽可能多地扩展，如果可以的话，甚至会侵入侧边栏空间。只需使用flex: 1（与flex-grow: 1、flex-shrink: 1、flex-basis: 0 相同），它告诉项目仅消耗空闲空间。