Я пытаюсь создать базовый пользовательский интерфейс с боковой панелью динамического размера и основным разделом контента, который будет расти до любой ширины, оставшейся у родителя. Это можно увидеть в моем примере ниже. Установка минимальной ширины: 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 и пусть родительский прокручивать, если он переполнен? Оба из них не будут влиять на эту ситуацию (которую я явно упомянут) из-за гибких элементов, имеющих автоматическую мин-ширину, а не явный предел. Таким образом, они даже не узнают измерения родителей, они не будут ограничиваться этим. Flex-Shrink будет играть часть только после исправления, но она включена по умолчанию, так что здесь все равно спорно.
Подробнее здесь:
https://stackoverflow.com/questions/796 ... g-their-si
Мобильная версия