Funny that this doesn’t even mention the actual critical failure of CSS centering: data loss on all items overflowing to the left of the container. Items to the right can be scrolled into view, but items to the left are entirely inaccessible.
But I suppose the complaint might be able to be generalized to all items past the start of a main-axis centered flex-box. Doesn’t make the failure more excusable.
Finally you can allow container to grow with the contents.
I was not able to get the nth child variants to work:
<main>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</main>
main {
display: flex; flex-direction: row; justify-content: center;
/* width: fit-content; */
}
div {
min-width: 400px; height: 300px; background-color: wheat; margin: 4px;
}
div:nth-child(1){
margin-left: auto;
}
div:nth-last-child(1){
margin-right: auto;
}