Center Div 水平带滚动 CSS

Question

I want to center the divs horizontally with an option to scroll using css. How can I achieve that? I saw a solution using the margin auto and max width but the div will be cut on the edges due to the maximum width which is 30rem.so I do not want that. What I want is to scroll only if the contents have no space left.

Please notice how the edges are cut. Yes it is scrollable but since there is space available I want to use it.

 .az-chips-btns-parent { overflow: auto; margin: auto; max-width: 30rem; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <div class="az-chips-btns-parent"> <div class="az-chips-btns"> <div class="az-save-filters-parent" style="margin-top: 1.5px;"> <button type="button" class="btn p-0 rounded-circle az-save-filters-chip ui-btn ui-shadow ui-corner-all"> <i class="fa fa-star az-save-filters" style="font-size: 15px;"></i> </button> </div> <button type="button" class="btn az-country-chip ui-btn ui-shadow ui-corner-all"> <div>Country</div> <div class="az-country-selected-chip az-selected-chip text-danger">3 selected</div> </button> <button type="button" class="btn az-brand-chip ui-btn ui-shadow ui-corner-all"> <div>Brand</div> <div class="az-brand-selected-chip az-selected-chip text-danger"></div> </button> <button type="button" class="btn az-location-chip ui-btn ui-shadow ui-corner-all"> <div>Location</div> <div class="az-location-selected-chip az-selected-chip text-danger"></div> </button> <button type="button" class="btn az-store-chip ui-btn ui-shadow ui-corner-all"> <div>Store</div> <div class="az-store-selected-chip az-selected-chip text-danger"></div> </button> <button type="button" class="btn az-section-chip ui-btn ui-shadow ui-corner-all"> <div>Section</div> <div class="az-section-selected-chip az-selected-chip text-danger"></div> </button> </div> </div>

Answer 1

Flexibility rules for button and parent elements can be used to accomplish your task.

For parent class az-chips-btns , you set basic flexibility rules, such as display: flex and align-items: center (horizontal alignment of elements within the parent), as well as a gap: 10px rule that sets the spacing between children.

For all first-level children, you set rule flex: 1 , which allows you to accept the same width relative to each other within the parent.

 .az-chips-btns-parent { overflow: auto; margin: auto; max-width: 30rem; }.az-chips-btns { display: flex; align-items: center; gap: 10px; }.az-chips-btns > * { flex: 1; } button { width: 100%; }

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"> <div class="az-chips-btns-parent"> <div class="az-chips-btns"> <div class="az-save-filters-parent" style="margin-top: 1.5px;"> <button type="button" class="btn p-0 rounded-circle az-save-filters-chip ui-btn ui-shadow ui-corner-all"> <i class="fa fa-star az-save-filters" style="font-size: 15px;"></i> </button> </div> <button type="button" class="btn az-country-chip ui-btn ui-shadow ui-corner-all"> <div>Country</div> <div class="az-country-selected-chip az-selected-chip text-danger">3 selected</div> </button> <button type="button" class="btn az-brand-chip ui-btn ui-shadow ui-corner-all"> <div>Brand</div> <div class="az-brand-selected-chip az-selected-chip text-danger"></div> </button> <button type="button" class="btn az-location-chip ui-btn ui-shadow ui-corner-all"> <div>Location</div> <div class="az-location-selected-chip az-selected-chip text-danger"></div> </button> <button type="button" class="btn az-store-chip ui-btn ui-shadow ui-corner-all"> <div>Store</div> <div class="az-store-selected-chip az-selected-chip text-danger"></div> </button> <button type="button" class="btn az-section-chip ui-btn ui-shadow ui-corner-all"> <div>Section</div> <div class="az-section-selected-chip az-selected-chip text-danger"></div> </button> </div> </div>