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

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

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

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

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

#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 >            <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),它告诉项目只消耗空闲空间.

总结

以上是内存溢出为你收集整理的html – 使flex项为其文本的宽度全部内容，希望文章能够帮你解决html – 使flex项为其文本的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。