Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make flex item be the width of its text

Tags:

html

css

flexbox

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

like image 603
Johnny000 Avatar asked Nov 02 '16 20:11

Johnny000


People also ask

How do you make a flex item take content width?

Solution with the CSS align-items property We set the align-items to the "flex-start" value on the container. Besides, we set the display to "flex", the flex-direction to "column" and add padding, height, and background. For the <a> element, we specify padding and background.

How do you make a flex item not take full width?

You can specify how wide you want you flex children to grow . Simply set flex-grow: 1 for both children if you want each item to share the same width. Save this answer.

How do I set flexible width in CSS?

If you want to have a fixed-width column with Flexbox, you need to use the CSS flex or flex-basis property. First of all, we set the display of our <div> container to "flex". Then, we specify the flex of the "grey" class as "0 0 50px".

What is the difference between Flex-basis and width?

The flex-basis property can be applied only to flex-items and width property can be applied to all. When using flex property, all the three properties of flex-items i.e, flex-row, flex-shrink and flex-basis can be combined into one declaration, but using width, doing the same thing would require multiple lines of code.


1 Answers

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.

like image 150
Michael Benjamin Avatar answered Oct 14 '22 07:10

Michael Benjamin