I have a flex container that will have a dynamic number of items. I want the container to scroll when the number of items is too many to fit in the container but also not shift any of the items inside the container to the left. If I have the container's justify-content property set to flex-start and margin-right set to auto, I get the behavior I want when there are too many items. however, if there isn't too many items, I want the items to be centered. I understand why this current config does what it does, but I'm wondering if there is a different config that will allow me to have any number of items inside the container and have it scroll when needed but have the items centered when the number of items is less than the width of the container?
#sub_cat_cntr { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;/*works with flex-start */ gap: 10px; width: 1610px; overflow-x: auto; height: 150px; margin-right: auto; /*works with this */}#sub_cat_cntr p { font-size: 20px; padding-top: 15px;}#sub_cat_flex_cntr { display: flex; justify-content: center;}.sub_cat { display: flex; justify-content: center; align-items: center; background-color: #003269; border: 1px solid white; border-radius: 5px; height: 100px; width: 2in; flex-shrink: 0;}.sub_cat:hover { cursor: pointer;}.sub_cat p { text-align: center;}<div id='sub_cat_flex_cntr'><div id="sub_cat_cntr" class=""><div id="Dashboard Designer" class="sub_cat" data-sid="8"><p>Dashboard Designer</p></div><div id="Groupings" class="sub_cat" data-sid="9"><p>Groupings</p></div><div id="Item Master Information" class="sub_cat" data-sid="10"><p>Item Master Information</p></div><div id="Job Tracker and Scheduling" class="sub_cat" data-sid="11"><p>Job Tracker and Scheduling</p></div><div id="Job Watcher" class="sub_cat" data-sid="12"><p>Job Watcher</p></div><div id="Purchase Req" class="sub_cat" data-sid="13"><p>Purchase Req</p></div><div id="Routings" class="sub_cat" data-sid="14"><p>Routings</p></div><div id="ZS Parts" class="sub_cat" data-sid="15"><p>ZS Parts</p></div></div></div>