Я программирую веб-приложение со складной боковой панелью внутри сетки CSS. Сетка CSS делит весь пользовательский интерфейс на разделы, а боковая панель является подкомпонентом одного из этих разделов.
Проблема, с которой я сталкиваюсь, заключается в том, что я хочу, чтобы боковая панель автоматически сжималась до минимального размера ее содержимого, что она делает нормально, пока не будет добавлена в ячейку сетки CSS, после чего она расширится чтобы заполнить всю ячейку.
Вот быстрый пример проблемы:
<style>
#myGrid{
display: grid;
grid-template-areas:
"g1 g2";
}
#panel{
grid-area: g2;
display: inline-block;
background: #FFAAAA;
height: 100%;
width: auto;
min-width: minmax(0, 1fr);
}
#panelContents{
display: flex;
flex-direction: row;
height: 100%;
}
#collapseArrow{
align-self: center;
right: 0;
top: 50%;
}
#block{
grid-area: g1;
width: 200px;
height: 100%;
background: #AAAAFF;
}
</style>
<body>
<div id="myGrid">
<div id="block">
Contents
</div>
<div id="panel">
<div id="panelContents">
<div id="collapseContents">
<div class="item">
Item1
</div>
<div class="item">
Item2
</div>
<div class="item">
Item3
</div>
<div class="item">
Item4
</div>
<div class="item">
Item5
</div>
</div>
<div id="collapseArrow"><</div>
</div>
</div>
</div>
</body>
Есть идеи, как решить эту проблему? Я пытаюсь уменьшить размер красной панели в соответствии с ее содержимым. Я попытался изменить min-width на 0, но это, похоже, не помогло.
EDIT: это более сложный пользовательский интерфейс для игрового движка HTML5. Левая ячейка сетки - это обозреватель ресурсов, а красная панель - это простая панель свойств для правого окна редактора (правая ячейка сетки), которую я пытаюсь отобразить только в левой части ячейки, поэтому остальная часть правая ячейка может быть окном редактора.