I'm searching for a solution to create a vertical navigation list that can accommodate elements wider than the container itself. Since users have the freedom to input any names for the items, I cannot predict their width, except maybe by setting a very high maximum character length.
After experimenting with various methods, I've realized that I keep getting multiple incorrect results - once using flexbox and once without. In both scenarios, when there is an element that overflows outside of the nav container, it causes issues if the user scrolls to the right, revealing that the item boundaries do not extend properly.
If I attempt to style the outer "item" (light blue), all items end up being the same width but fall short of accounting for the overflow. Alternatively, styling the inner item (green) results in the correct width only for the overflowing item, while the others vary in width based on their content length.
Is there a way to:
- Ensure all items appear to be the same width even with a large overflowing item
- Achieve this without setting a fixed width due to unpredictable user input lengths
- Limit the solution to CSS only, avoiding the use of JavaScript
Initial View, appears fine...
Scrolling to the right... looks messy!
Codepen Link
Feel free to explore the Codepen demonstration
HTML Structure
<div id="container">
<div class="item"><span>Item 1</span></div>
<div class="item"><span>Item 2</span></div>
<div class="item"><span>Item 3</span></div>
<div class="item"><span>Item 4</span></div>
<div class="item"><span>Super Long Item Name of Obliteration</span>
</div>
</div>
<div id="flex-container">
<span class="flex-item"><span>Item 1</span></span>
<span class="flex-item"><span>Item 2</span></span>
<span class="flex-item"><span>Item 3</span></span>
<span class="flex-item"><span>Item 4</span></span>
<span class="flex-item"><span>Super Long Item Name of Obliteration</span>
</span>
</div>
CSS Styles
#container {
width:200px;
height:400px;
background-color: red;
overflow:auto;
}
.item {
height: 40px;
border: 1px solid blue;
background-color:lightblue;
white-space: nowrap;
}
#flex-container {
width:200px;
height:400px;
background-color: red;
overflow:auto;
display: flex;
flex-direction:column;
}
.flex-item {
height: 40px;
border: 1px solid blue;
background-color:lightblue;
white-space: nowrap;
}
/* Content */
span > span,
div > span {
background-color: green;
}