html – 使flex项为其文本的宽度

发布时间：2020-12-14 19:45:27 所属栏目：资源来源：网络整理

导读：我希望有一个包含两列的布局,其中左列是某种侧边栏. 现在我想在侧边栏中使用一些不应该换行的文本. 当我这样做它会导致某种溢出然后使用溢出：隐藏隐藏文本的很大一部分. 如何修改左列以使用未包装文本的宽度和右列来使用剩余空间而不丢弃溢出：隐藏？ #cont

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

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

当我这样做它会导致某种溢出然后使用溢出：隐藏隐藏文本的很大一部分.

如何修改左列以使用未包装文本的宽度和右列来使用剩余空间而不丢弃溢出：隐藏？

#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

解决方法

How can I modify the left column to use the width of the unwrapped text and the right column to use the remaining space without dropping 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),它告诉项目只消耗空闲空间.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!