Why is overflow-y: hidden creating a horizontal scroll bar in my flex layout?

Question

I have two panels side by side. The right-hand one contains species names, which should not wrap (they're small enough to occupy only a small part of the screen). The left-hand panel contains more things, and occupy most of the screen. Here's my code.

html,body {
  height: 100%;
}
body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}
#left {
  background-color: skyblue;
  flex-grow: 1;
  padding: 1em;
}
#right {
  background-color: indianRed;
 white-space: nowrap;
  padding: 1em;
  display: flex;
  flex-direction: column;
}

<div id='left'>
Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
</div>

When there's no scrollbar, the width of the right-hand panel is correct. But as soon as I add a vertical scrollbar (overflow-y: auto), it's width gets much smaller, creating also a horizontal scrollbar. Why? And how to solve it? I only want the vertical scrollbar. The width of the panel should be enough to contain all the words on it.

html,body {
  height: 100%;
}
body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}
#left {
  background-color: skyblue;
  flex-grow: 1;
  padding: 1em;
}
#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

<div id='left'>
Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
</div>

something like this? [https://jsfiddle.net/cL815woq/2/](https://jsfiddle.net/cL815woq/2/) — Sfili_81, Dec 10 '19 at 13:08
@AkashShrivastava That's creating an undesired horizontal scrollbar. — Rodrigo, Dec 10 '19 at 13:14
@Sfili_81 "Some names a little larger" is becoming "Some names/a little larger" — Rodrigo, Dec 10 '19 at 13:34
@ZohirSalak Please add that as an answer, so I can accept it. — Rodrigo, Dec 10 '19 at 14:36

Rainbow · Accepted Answer · 2022-08-09T12:41:18.450

Your current flex properties are as follows:

div#left

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

This means:

The div's width will be content first flex-basis:auto; then fill the remaining space flex-grow:1;

div#right

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

This means:

The div's width will be content first flex-basis:auto; And shrink to fit flex-shrink:1;

This is why you see horizontal scrollbar when the vertical scroll is added, because it eats from the overall width.

Solution #1

flex-basis:0; on the left div which will make it fill the remaining space first then lay down the content

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}

#left {
  background-color: skyblue;
  flex-grow: 1;
  flex-basis: 0;
  padding: 1em;
}

#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

<div id='left'>
  Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
</div>

Solution #2

flex-shrink:0; on the right div which will prevent it from shrinking

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}

#left {
  background-color: skyblue;
  flex-grow: 1;
  padding: 1em;
}

#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

<div id='left'>
  Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
</div>

Issue with this solution is that if the content in the left div is too long there will be overflow

html,body {
  height: 100%;
}
body {
  display: flex;
  margin: 0;
  /* removed to illustrate the problem */
  /* overflow-y: hidden; */
}
#left {
  background-color: skyblue;
  flex-grow: 1; 
  padding: 1em;
}
#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  display: flex;
  /* if you remove this there will be no overflow because the right div will shrink to fit*/
  flex-shrink:0; 
  flex-direction: column;
  overflow-y: auto;
}

#left>div{
    /* I eyeballed this value to fit the snippet in SO*/
    width:500px; 
    background-color:Red;
    height:100px;
}

<div id="left">
  <div>
    <div>
    </div>
  </div>
</div>
<div id="right">
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
  <p>Some names.</p>
  <p>Some names a little larger.</p>
</div>
</body>

Great solution and explanation. Hit the nail on the head. For anybody wanting more details see [the difference between `flex-basis: auto` and `flex-basis: 0`](https://stackoverflow.com/q/43520932/3597276). — Michael Benjamin, Dec 10 '19 at 17:45

score 2 · Answer 2 · answered Dec 10 '19 at 12:52

2

Its because of long text inside your div and you set white-space: nowrap; which prevent it to overflow

Use

#right {
    white-space: normal;
}

answered Dec 10 '19 at 12:52

Awais

4,752
4
17
40

The text is not so long. If I can have `nowrap` without the vertical scrollbar, why not with it? – Rodrigo Dec 10 '19 at 12:57
Dear static width of that container prevent it to adjust its size according to the viewport so you need to overflow that text. You can also use media quries for that. – Awais Dec 10 '19 at 16:25

score -1 · Answer 3 · answered Dec 10 '19 at 12:51

-1

Define both scrollbars.

body {
  display: flex;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll; /* not auto */
}

answered Dec 10 '19 at 12:51

bron

1,457
1
9
18

Mayur Jotaniya · Answer 4 · 2019-12-11T04:10:34.670

-1

It was browser's default functionality. If you add any of one attribute value auto then default it will add both scrollbars.

If you want to add specific then you must need to add in your code.

overflow-x: hidden;
overflow-y: scroll;

edited Dec 11 '19 at 04:10

answered Dec 10 '19 at 12:54

Mayur Jotaniya

304
1
18

This hides part of the text inside the right panel. – Rodrigo Dec 10 '19 at 12:55
Add another style attribute `word-break: break-word;`. – Mayur Jotaniya Dec 10 '19 at 12:58
I don't want to break the lines! – Rodrigo Dec 10 '19 at 12:59
There are only **three ways** to handle your problem. You must need to **break line or hide over-flow text** and the third one is make **scroll visible**. – Mayur Jotaniya Dec 10 '19 at 13:01
There's a fourth option: to measure every line of text, and then define the width of the right panel accordingly, which is ridiculous, because the CSS is there to do exactly that! – Rodrigo Dec 10 '19 at 13:09
That's why I told you there is three – Mayur Jotaniya Dec 10 '19 at 13:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/204018/discussion-between-mayur-jotaniya-and-rodrigo). – Mayur Jotaniya Dec 11 '19 at 04:11

Akash Shrivastava · Answer 5 · 2019-12-10T13:24:12.440

If set overflow-y explicitly you might need to set overflow-x as well.

Or you can set width value or right div.

html,body {
  height: 100%;
}
body {
  display: flex;
  margin: 0;
}
#left {
  background-color: skyblue;
  flex-grow: 1;
  padding: 1em;
}
#right {
  background-color: indianRed;
  white-space: nowrap;
  padding: 1em;
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 100%;
}

<div id='left'>
Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
</div>

I don't want any horizontal scrollbar. As I said, the species names (on the right) are small, and fit perfectly on the screen (I'm not considering smartphones). — Rodrigo, Dec 10 '19 at 13:15
oh, missed there, updated snippet, setting the width might get you what you want. — Akash Shrivastava, Dec 10 '19 at 13:24

Why is overflow-y: hidden creating a horizontal scroll bar in my flex layout?

5 Answers5

Solution #1

Solution #2