将flex item设置为其文本的宽度 [英] Make flex item be the width of its text

问题描述

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

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

当我这样做会导致某种溢出，然后使用 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，一些文字遗失在这里< / span> < / div> < / div> < div id =content>一些有趣的内容< / div>< / div>  

JSFIDDLE

解决方案

如何修改左列以使用展开文本的宽度，右列使用剩余空间而不删除 overflow：hidden ？

告诉左列只有其内容的宽度。 p>

而不是这样：

  #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

注意：

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 ， 1 ， flex-basis：0 ），它告诉项目只使用自由

I want to have a layout with two columns, where the left column is some kind of sidebar.

Now I want to use some text in the sidebar that shouldn't wrap.

When I do so it causes some kind of overflow and then using overflow:hidden hides a good part of the text.

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?

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

Tell the left column to be only as wide as its content.

So instead of this:

#sidebar {
  flex 1 auto;            /* 1 */
  overflow: hidden;
  border: 1px solid red;
}

Use this:

#sidebar {
  flex: 0 1 auto;        /* 1 */
  overflow: hidden;
  border: 1px solid red;
}

And tell the right column to consume any remaining space.

Instead of this:

#content {
  flex: 1 100%;         /* 2 */
  border: 1px solid black;
}

Use this:

#content {
  flex: 1;              /* 2 */
  border: 1px solid black;
}

revised fiddle

Notes:

1. flex: 1 auto is shorthand for flex-grow: 1 (defined), flex-shrink: 1 (by default) and flex-basis: auto (defined). Switch to flex-grow: 0 since you don't want the box to expand beyond the content.

   Incidentally, flex-grow: 0, flex-shrink: 1 and flex-basis: auto are all default values. Hence, you can omit the flex rule and get the same result.

   Note that your code won't work in any case because you have a syntax error (a missing :).

2. flex-basis: 100% will force the item to expand as much as it can across the width of the container, even intruding into the sidebar space if it can. Just use flex: 1 (same as flex-grow: 1, flex-shrink: 1, flex-basis: 0), which tells the item to consume only free space.

这篇关于将flex item设置为其文本的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！