Horizontal scroll div within flex

December 10, 2021

I am trying to get a horizontal scroll on the links container, within the right pane as shown in the code snippet, but for some reason the scroll is not showing up there and the whole page becomes scrollable. Also, the left and the right pane should have the same width (flex: 1 for both). Any ideas what I am missing here?

#parent {
  display: flex;
}

#left_pane {
  flex: 1;
  background-color: red;
}

#right_pane {
  flex: 1;
  background-color: yellow;
}

#links_container {
    width: 100%;
    height: 80px;
    overflow-x: auto;
    white-space: nowrap;
}

.mylink {
    padding: 20px;
    background-color: #F4F6F8;
}

<div id='parent'>
  <div id='left_pane'>
    <p>hey</p>
  </div>
  <div id='right_pane'>
      <div id='links_container'>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
    </div>
  </div>
</div>

>Solution :

Add min-width on #right_pane

For padding
Add display: inline-block; on a tag

#right_pane {
    flex: 1;
    background-color: yellow;
    min-width: 5px;
}

#parent {
  display: flex;
}

#left_pane {
  flex: 1;
  background-color: red;
}

#right_pane {
  flex: 1;
  background-color: yellow;
  min-width: 5px;
}

#links_container {
    width: 100%;
    height: 80px;
    overflow-x: auto;
    white-space: nowrap;
}

.mylink {
    padding: 20px;
    background-color: #F4F6F8;
    display: inline-block;
}

<div id='parent'>
  <div id='left_pane'>
    <p>hey</p>
  </div>
  <div id='right_pane'>
      <div id='links_container'>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
        <a href="" class='mylink'>Link1</a>
    </div>
  </div>
</div>