Horizontal scroll div within flex-CodePudding

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>

CodePudding user response：

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>