I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links. The issue lies in the fact that the parent div containing the links will also overflow if its contents surpass its own width. Below is the code snippet: Html
<div class="container">
<div class="pageContent">
<br />
<div class="links">
<a href='#1'>link1 </a>
<a href='#1'>link2 </a>
...
</div>
<br />
</div>
<div class="side">
side here
</div>
</div>
CSS:
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
}
a {
padding: 5px;
}
.pageContent {
order: 2;
flex-grow: 4;
background: #ecf0f1;
}
.side {
background: #3498db;
flex-grow: 1;
order: 1;
}
.links {
white-space: nowrap;
overflow-x: scroll;
width: 100%;
}
See a live demo here
My main concern is: how can I adjust the width of the .links div to match that of its parent without causing an overflow?
If possible, I prefer a CSS-only solution.
I experimented with setting .links {width:500px} and it worked, but I'm looking for a more dynamic approach to accommodate various browser sizes.