Как ограничить гибкие элементы от переполнения родителей, а также устанавливая их размер вдоль основной оси изгиба? ⇐ CSS

[Anonymous]

Я пытаюсь создать базовый пользовательский интерфейс с боковой панелью динамического размера и основным разделом контента, который будет расти до любой ширины, оставшейся у родителя. Это можно увидеть в моем примере ниже. Установка минимальной ширины: 0 на Позволяет контейнеру прокручивать горизонтальный, как я хочу, но это (довольно странно) нарушает ширину, которую я установил-она, казалось бы, игнорируется. Ниже я установил .CARD , чтобы иметь ширину 174px , но когда я запускаю фрагмент, это всего лишь 104px .


body {
margin: 0;
width: 800px;
}

header {
background: #f88;
padding: 0.5rem 1rem;
}

footer {
background: #8f8;
padding: 0.5rem 1rem;
}

.container {
display: flex;
}

.sidebar {
background: #88f;
padding: 0.5rem 1rem;
width: 25%;
max-width: 168px;
}

main {
min-width: 0;
}

.cards {
display: flex;
flex-direction: row;
overflow: auto;
}

.card {
background: #888;
margin: 0.5rem 1rem;
padding: 8px;
width: 174px;
}< /code>

Код: Выделить всё

Header Content

SideBar Content



Title
Description

Click



Title
Description

Click



Title
Description

Click



Title
Description

Click



Title
Description

Click



Title
Description

Click



Title
Description

Click



Title
Description

Click



Title
Description

Click





Footer Content
< /code>
< /div>
< /div>
< /p>
К сожалению, я действительно изо всех сил пытаюсь понять, почему. Я пробовал разбрызгивать гибкий рост 

без эффекта, и настройка ширины: fit-content on .cards Исправляет проблему ширины, но нарушает прокрутку. Как я могу иметь оба: фиксированную ширину на каждом .card и позволить родителю прокручивать, если он переполнен?

Подробнее здесь: https://stackoverflow.com/questions/796 ... g-their-si