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

Your current flex properties is as follow :

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>

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

Use

#right {
    white-space: normal;
}

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

Solution #1

Solution #2

Tags:

Html

Css

Flexbox

Related

Recent Posts