Flexbox disallow column expand

Question

I'm improving but still pretty new at Flexbox and HTML/CSS layouts so sorry if this is basic (seems like it would be but I can't find anything).

I would like to have a 2 column layout with the second column taking whatever space it needs for it's content (it's a sidebar of tools) and the first column taking up the rest of the space. I have this working but in my main content section I have some things that are resizable and when they resize horizontally it bumps the sidebar off the screen and puts a scroll bar below which is not what I want. I would like the content not to be able to resize horizontally any more than the available width of the column.

Here is a simplification of my code that shows the reproducible example:

<html>
    <body>
        <div style="display: flex">
            <div style="flex: 1;">
                <textarea style="resize: both;"/>
            </div>
            <div style="flex: content">
                something
            </div>
        </div>
    </body>
</html>

The text area just represents the resizable content.

How can I force it to just be the width of the column and not stretch when the content grows?

Here is a fiddle for it if anyone wants to play with it: https://jsfiddle.net/nuejL86k/

min-width:0 to the left element (the parent of the textarea) — Temani Afif, Jul 09 '19 at 09:18
Ok so after reading through that and experimenting here is the updated fiddle that is working https://jsfiddle.net/xc6vbg58/. Commenting back because it wasn't completely obvious as a beginner after reading that link, I also needed to set some max width properties on a few elements (see the fiddle). — sfaust, Jul 09 '19 at 14:56

score 1 · Answer 1 · answered Jul 09 '19 at 00:50

Try this code, you will need to set flex-grow: 1 to specify that your flex container needs to have equal width and flex-basis: 0% to tell what is the initial size of the container.

.content {
  display: flex;
}

.left,
.right {
  flex-grow: 1;
  flex-basis: 0%;
}

.right {
  background: red;
}

<div class="content">
  <div class="left">
    <textarea style="resize: both;"> </textarea>
    <textarea style="resize: both;"> </textarea>
    <textarea style="resize: both;"> </textarea>
  </div>
  <div class="right">
    something
  </div>
</div>

Thanks but this still does the same thing and it doesn't have the sidebar as content fitting. It starts as both columns 50% and when I resize the internal content on the left it pushes the right column smaller until it reaches the content size and then pushes it off the right side of the screen. — sfaust, Jul 09 '19 at 01:10

Flexbox disallow column expand

1 Answers1