CODEWITHSUNDEEP
htmlcssflexbox
Rodrigo
Rodrigo

Reputation: 5129

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

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?

Upvotes: 2

Views: 71

Answers (2)

Sandro
Sandro

Reputation: 118

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>

Upvotes: 1

RobertAKARobin
RobertAKARobin

Reputation: 4258

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;

Upvotes: 2

Related Questions