У меня довольно простая настройка: боковая панель должна поднять 25% экрана до максимума 200px, а основной контент должен заполнить оставшуюся ширину экрана. По сути, демонстрация ниже работает, но я немного смущен тем, как установить максимальную ширину этого элемента, когда я использую прокладку и поддерживаю это соотношение 25%. и больше. Проблема возникает, если я опускаюсь ниже 800px, сказать, 760px: при этой ширине я бы хотел, чтобы боковая панель заняла общее количество 190px, как 760px/4 = 190px, но она остается на уровне 200 пикселей из -за этого CALC (ширина должна быть 190px, но по размеру Font, который получает конструкцию до 168PX + 2REM PAD -200P). /> Я понимаю, почему это проблема, я просто не уверен, как с этим справиться. Мне каким-то образом нужно максимально-ширину , чтобы учесть заполнение, я полагаю, не пытаясь исправить это с помощью Calc . Это возможно?
Код: Выделить всё
body {
min-height: 100vh;
margin: 0;
/* Just for testing */
width: 760px;
}
.container {
display: flex;
min-height: 100vh;
}
.sidebar {
flex: 1;
/* Trouble */
padding: 0.5rem 1rem;
max-width: calc(200px - 2rem);
background-color: lightsteelblue;
}
main {
flex: 3;
padding: 0.5rem 1rem;
}< /code>
Sidebar Content
Main Content
Подробнее здесь:
https://stackoverflow.com/questions/796 ... g-on-items
Мобильная версия