Я строю панель, в которой у меня есть правая область меню с некоторыми командными кнопками, прокручиваемыми по вертикали, и основная левая область, покрывающая оставшееся пространство, прокручиваемыми по горизонтали.
Исправьте, что предметы должны быть на полной доступной высоте (до 100% от области просмотра).
В примере кода левая область flex-элемента "толкает" правую сторону, чтобы переместиться вправо ... Я также не могу правильно отобразить полосы прокрутки.
Ниже результата, который я ищу:

Вот мой код шаблона:
.panel-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
padding: 0px;
}
.panel-container-left {
flex-grow: 1;
flex-shrink: 0;
background-color: grey;
display: flex;
flex-direction: column;
}
.panel-container-right {
margin-left: 3px;
background-color: green;
}
.panel-right-data {
display: flex;
flex-direction: column;
overflow-y: scroll;
}
.panel-right-data-item {
background-color: green;
color: white;
padding: 5px;
margin: 2px;
width: 20px;
}
.panel-left-data {
display: flex;
flex-direction: row;
overflow-x: scroll;
}
.panel-left-data-item {
background-color: blue;
color: white;
padding: 5px;
margin: 2px;
width: 80px;
height: 100%;
}
<div class="panel-container">
<div class="panel-container-left">
<div>LEFT AREA</div>
<div class="panel-left-data">
<div class="panel-left-data-item">
ITEM 1
</div>
<div class="panel-left-data-item">
ITEM 2
</div>
<div class="panel-left-data-item">
ITEM 3
</div>
<div class="panel-left-data-item">
ITEM 4
</div>
<div class="panel-left-data-item">
ITEM 5
</div>
</div>
</div>
<div class="panel-container-right">
<div>RIGHT AREA</div>
<div class="panel-right-data">
<div class="panel-right-data-item">
COMMAND 1
</div>
<div class="panel-right-data-item">
COMMAND 2
</div>
<div class="panel-right-data-item">
COMMAND 3
</div>
<div class="panel-right-data-item">
COMMAND 4
</div>
<div class="panel-right-data-item">
COMMAND 5
</div>
<div class="panel-right-data-item">
COMMAND 6
</div>
<div class="panel-right-data-item">
COMMAND 7
</div>
<div class="panel-right-data-item">
COMMAND 8
</div>
<div class="panel-right-data-item">
COMMAND 9
</div>
</div>
</div>
</div>