When using center-aligned flexbox first elements gets hidden and inavailable in scrollbar on smaller viewport.
Example, shrink to small VP and first element gets hidden: https://codepen.io/tomjoad2000/pen/xoaKrg
Tested in both FF and Chrome. Is there any fix without manually tweeking the smaller viewport?
<html>
<head>
<style>
.chaptersContainer {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: flex-start;
overflow-x: auto;
border: 1px solid #900;
}
.chapter {
display: block;
flex-shrink: 0;
margin: 10px;
border: 1px solid #999;
width: 10em;
height: 10em;
}
.chapter h2 {
text-align: center;
}
</style>
</head>
<body>
<div class="chaptersContainer">
<div class="chapter">
<h2>first</h2>
</div>
<div class="chapter">
<h2>asdf</h2>
</div>
<div class="chapter">
<h2>asdf</h2>
</div>
<div class="chapter">
<h2>asdf</h2>
</div>
<div class="chapter">
<h2>asdf</h2>
</div>
<div class="chapter">
<h2>last</h2>
</div>
</div>
</body>
</html>
