Установить ширину родителя равной общей ширине дочерних элементов, используя только CSS?

Я знаю, что это немного запоздало, но надеюсь, что это поможет кому-то, кто ищет подобное решение:

Для реализации горизонтальной прокрутки кнопок (или других элементов) можно использовать комбинацию стилей inline-flex для родительского контейнера и inline-table для дочерних элементов. Вот пример кода:

<div class="parent" style="display: inline-flex">
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
    <div class="child" style="display: inline-table">some button</div>
</div>

Чтобы сделать содержимое прокручиваемым по горизонтали, я добавил еще один родительский элемент (grandparent) с установленным свойством overflow-x: scroll;:

<div class="grandparent" style="width: 300px; overflow-x: scroll; background: gray">
    <div class="parent" style="display: inline-flex">
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
        <div class="child" style="display: inline-table">some button</div>
    </div>
</div>

С помощью этой структуры всё будет динамически адаптироваться, и элементы будут прокручиваться по горизонтали при переполнении. Надеюсь, это сэкономит время тем, кто сталкивается с подобными задачами!

Ваш код CSS и HTML, похоже, создает контейнер с классом parent, который содержит три элемента с классом child. Давайте разберемся, как это работает.

1. Сброс стилей: В начале CSS устанавливается сброс для всех элементов:

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   

   Это убирает отступы и поля по умолчанию, а также устанавливает механизм расчета размеров для всех элементов.

2. Стили родительского контейнера:

   .parent {
     height: 100%;
     display: inline-block;
     background: #bada55;
     font-size: 0; /* убираем пробелы */
   }
   

   Родительский элемент имеет высоту 100%, отображается как inline-block, что позволяет ему занимать только необходимое пространство в строке. Установка font-size: 0 устраняет пробелы между дочерними элементами, так как inline-block элементы могут иметь пробелы, которые визуально отображаются как отступы.

3. Стили дочерних элементов:

   .child {
     height: 100px;
     width: 100px;
     border: 1px solid red;
     display: inline-block;
   }
   

   Каждый дочерний элемент (класс child) имеет заданную высоту и ширину, а также красную рамку. Они также отображаются как inline-block, что позволяет им размещаться в одну строку.

4. HTML структура:

   <div class="parent">
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
   </div>
   

   Здесь вы создаете три элемента child, которые внутри контейнера parent.

В итоге, этот код создает горизонтальный ряд из трех квадратов с размером 100x100 пикселей, каждый из которых обрамлён красной рамкой и находится на фоне светло-зеленого цвета.

Если у вас есть дополнительные вопросы или требуется помощь с другим аспектом, не стесняйтесь спрашивать!

Используйте

{ width: max-content; }

на родительском элементе — это должно работать нормально. Это также экспериментальная функция. (Не понимаю, почему другие не публикуют этот подход.)

Вы можете просто установить display: inline-block; для элемента .parent, чтобы его ширина совпадала с общей шириной его дочерних элементов .child.

.parent {
    display: inline-block;
}

Элементы в HTML, которые по умолчанию имеют display: block;, будут занимать всю ширину своего родительского элемента. В вашем случае элемент .parent, имея display: block;, занимает всю ширину своего родителя. Установив display: inline-block; для элемента .parent, вы сделаете его ширину равной содержимому, в данном случае это будет общая ширина, занимаемая его дочерними элементами .child.

Вы можете попробовать следующий CSS:

* {
    flex-grow: 1;
    flex-basis: 0;
    width: fit-content;
}

Этот код устанавливает для всех элементов на странице следующее:

• flex-grow: 1; позволяет элементам расти и занимать доступное пространство в контейнере flex.
• flex-basis: 0; указывает, что изначально элементы не занимают места до распределения доступного пространства.
• width: fit-content; устанавливает ширину элементов в соответствии с их содержимым.

Обратите внимание, что использование селектора * может повлиять на производительность и стиль страницы, так как он применяет правила ко всем элементам. Лучше ограничить область применения этих стилей более специфичным селектором, если это возможно.