Johnny000 Johnny000 - 1 month ago 15
CSS Question

Flexbox layout whitespace wrap issue

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

Now I want to use some text in the sidebar that should't wrap on whitespace.

When I do so it cause 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 unwraped text and the right column to use the remaining space without dropping
overflow:hidden
?

JSFIDDLE
https://jsfiddle.net/8jjzpm7b/1/

HTML/CSS

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

Answer

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

Try this:

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

And tell the right column to consume any remaining space.

Instead of this:

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

Try this:

#content {
  flex: 1;              /* 3 */
  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). Since you don't want the box to expand beyond the content, use flex-grow: 0. Also, your code doesn't work anyway because you have a syntax error (missing :).

  2. Equivalent to flex-grow: 0, flex-shrink: 1, flex-basis: auto. The flex item will not expand beyond the length of the content.

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