Css максимальная ширина не работает должным образом в div

Question

У меня есть HTML структура как:

.container {
  width: 100%;
  height: 300px;
  background-color: blue;
}

.dots-container-wrapper {
  width: 100%;
}

.dots-container {
  max-width: 55px;
  overflow: hidden;
  min-width: 1px;
  display: block;
  padding: 0;
  margin: 0 auto;
  height: 0.875rem;
  position: relative;
}

.dots-container>ul {
  padding: 0;
  display: flex !important;
  transition: all 0.25s;
  position: relative;
  margin: 0;
  list-style: none;
  transform: translateX(0);
  align-items: center;
  bottom: unset;
  height: 100%;
}

.dots-container>ul li {
  width: 6px;
  height: 6px;
  margin: 0 2.5px;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: .7;
}

<div class="container">
  <div class="dots-container-wrapper">
    <div class="dots-container">
      <ul class="dots">
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>

Проблема состоит в том, что у div "dots-container" есть свойство max-width: 55px. Но если ширина меньше 55px, я бы хотел использовать реальную ширину, однако, div всегда равен 55px. Это проблема, потому что я использую это в карусели с функциональностью точек. Когда есть 5 изображений, вы можете видеть 5 точек, выровненных по центру, но если изображений меньше, скажем, 2, то размер div по-прежнему составляет 55px, и точки не кажутся выровненными по центру. Смотрите примеры снимков экрана.

Answer 1

Ваш .dots-container отображается как блок. По умолчанию блок всегда будет пытаться заполнить всю ширину. Сделав контейнер .dots-container-wrapper display flex, его дети будут занимать столько места, сколько им нужно (и при этом центрируя их при необходимости).

.dots-container-wrapper {
    width: 100%;
    display: flex; // change to flex
}

.dots-container {
    max-width: 55px;
    overflow: hidden;
    min-width: 1px;
    display: block;
    padding: 0;
    margin: 0 auto;
    height: 0.875rem;
    position: relative;
}