Question

我希望有一个包含两列的布局，其中左列是某种侧边栏。

现在我想在侧边栏中使用一些不应该包装的文本。

当我这样做时会导致某种溢出，然后使用overflow:hidden隐藏文本的很大一部分。

如何修改左列以使用展开文本的宽度和右列来使用剩余空格而不删除overflow:hidden？

＆＃13;

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

＆＃13;

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

＆＃13;

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

注意：

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规则并获得相同的结果。

请注意，您的代码在任何情况下都不会起作用，因为您有语法错误（缺少:）。
flex-basis: 100%将强制项目在容器的宽度范围内尽可能多地展开，如果可以，甚至会侵入侧边栏空间。只需使用flex: 1（与flex-grow: 1，flex-shrink: 1，flex-basis: 0相同），即告知该项仅使用免费空间。

使flex项为其文本的宽度

1 个答案: