使flex项为其文本的宽度

Question

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

Answer 1

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.