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
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.
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.
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".
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.
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:
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 :
).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With