How to make a div occupy all available remaining horizontal space without specifying its width?

Question

I need to create two divs: one (on the right) small, with short texts that don't wrap, and the other (on the left) bigger, occupying the remaining space of the screen, and wrapping the text where needed. I'm trying the following:

html,body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  align-items: stretch;
}
#divL {
  background-color: green;
  flex: 1 0 auto;
  padding: 1em;
}
#divR {
  background-color: red;
  white-space: nowrap;
  padding-left: 1em;
  padding-right: 1.5em;
  overflow-y: auto;
}

<div id='divL'>
a short text
</div>
<div id='divR'>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
</div>

So far, so good. But the left panel will increase together with the text, pushing the right panel out of screen when the text is too large:

html,body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  align-items: stretch;
}
#divL {
  background-color: green;
  flex: 1 0 auto;
  padding: 1em;
}
#divR {
  background-color: red;
  white-space: nowrap;
  padding-left: 1em;
  padding-right: 1.5em;
  overflow-y: auto;
}

<div id='divL'>
very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text 
</div>
<div id='divR'>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
<p>list of items</p>
</div>

I don't want to specify fixed widths, because the right panel has variable width (never too big, only two or three words in each line). How can I achieve such a simple design? Is it possible without specifying fixed widths somewhere?

Technically, `flex-grow: 1` is a relative width; it is relative to the other boxes in the flex container, but whatever. — Heretic Monkey, Dec 05 '19 at 21:26

score 2 · Accepted Answer · answered Dec 05 '19 at 21:07

The issue is in this line:

flex: 1 0 auto;

This is shorthand for:

flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;

See: https://developer.mozilla.org/en-US/docs/Web/CSS/flex

The problematic part is flex-shrink: 0. This says that the left div shouldn't shrink at all.

Instead, try:

flex: 1 1 auto;

Going a step further: the default value of flex-shrink is 1 and of flex-basis is auto. If 2 out of the 3 properties have default values, I wouldn't use the shorthand flex at all. I'd just specify the one property you need to NOT be default:

flex-grow: 1;

Thank you! What was confusing me is that in my real example the text is inside a div, which is inside another div, and both need `flex-grow: 1`. Now it works! — Rodrigo, Dec 05 '19 at 21:24

score 1 · Answer 2 · answered Dec 05 '19 at 21:11

Is that what do you want?

    html,body {
      margin: 0;
    }
    body {
      display: flex;
    }
    #divL {
      background-color: green;
      flex: 1;
    }
    #divR {
      background-color: red;
    }

<div id='divL'>
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text 
    </div>
    <div id='divR'>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    <p>list of items</p>
    </div>

How to make a div occupy all available remaining horizontal space without specifying its width?

2 Answers2