使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-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),它告诉该项目只消耗自由空间.