flex中的水平滚动div

Question

我正试图在链接容器上的右窗格中进行水平滚动，如代码片段所示，但由于某种原因，滚动没有显示在那里，整个页面都可以滚动。此外，左侧窗格和右侧窗格应具有相同的宽度(两者均为flex: 1(。你知道我在这里缺少什么吗？

#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>

Answer 1

在#right_pane上添加min-width

对于padding在a标签上添加display: inline-block;

#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>