使 flex item 为其文本的宽度

我想要一个有两列的布局，其中左列是某种侧边栏。

现在我想在侧边栏中使用一些不应换行的文本。

当我这样做时，它会导致某种溢出，然后使用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 https://jsfiddle.net/8jjzpm7b/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;
}

修改后的小提琴 https://jsfiddle.net/8jjzpm7b/5/

Notes:

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

   顺便，flex-grow: 0, flex-shrink: 1 and flex-basis: auto都是默认值 https://www.w3.org/TR/css-flexbox-1/#flex-components。因此，您可以省略flex规则并得到相同的结果。

   请注意，您的代码在任何情况下都无法工作，因为您有语法错误（缺少:).

2. flex-basis: 100%将迫使项目在容器的宽度上尽可能扩展，甚至侵入侧边栏空间（如果可以的话）。只需使用flex: 1（与...一样flex-grow: 1, flex-shrink: 1, flex-basis: 0），它告诉该项目仅消耗free space.