Flex item getting our of flex container (horizontal) - html

Question

I'm building a panel where I have a right menu area with some command buttons, scrolled vertically, and a main left area covering the remaining space, scrolled horizontally.
Repair that items must be full available height (up to 100% of the viewport).
In the example code, left area flex item is is "pushing" the right side to move to right... I'm also not getting the scrollbars to appear correctly.
Below the result I'm looking for:
Here is my template code:
.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>

Answer 1

For the height : height: 100%; only work when the immediat parent height is defined. So you have to add a specific height size to .panel-left-data, it can be 100% but in turn you have to add a specific height to it's parent node .panel-container-left, it also can be 100% and since .panel-container does have a height defined (100vh), all is good !
For the rest, I commented directly some adjustements I made, there may be better solutions for some of them but it work.
In practice :
.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;
height: 100%; /*added a height*/
overflow-x: scroll; /*moved the scroll here*/
overflow-y:hidden; /*just to be sure*/
}
.panel-container-right {
margin-left: 3px;
background-color: green;
position:absolute; /*added a position absolute*/
right:0px; /*the position let me use the right/left/top/bottom positionning*/
z-index:10; /*let me put this element on top of those with lower z-index*/
width:200px; /*and a width to make it good-looking*/
/*moved the scroll here with some height to restrict it*/
height: calc( 100% - 17px );
overflow-y:scroll;
}
.panel-right-data {
display: flex;
flex-direction: column;
/*overflow-y: scroll; moved on the parent element*/
}
.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; moved on the parent element*/
height: calc( 100% - 40px ); /*added a height, cut it a little to account for the scrollbar and your example*/
}
.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>

Answer 2

Looking over the code, you seem to be missing a lot of align-items, justify-content, and flex properties. Also make sure you are using class="" and not className="" in your html unless you are working in JSX. Here's some code that is a little closer to what you seem to want.
.panel-container {
height: 100vh;
display: flex;
flex-direction: row;
justify-content: space-between; /* Added */
align-items: stretch; /* Added */
padding: 0px;
}
.panel-container-left {
flex: 1 1 auto; /* Replace flex-grow flex-shrink*/
background-color: grey;
display: flex;
flex-direction: column;
justify-content: stretch; /* Added */
max-width: calc(100vw - 200px); /* Added - For Horizontal scrolling */
}
.panel-container-right {
margin-left: 3px;
background-color: green;
flex: 0 0 200px; /* Added */
align-items: space-between; /* Added */
justify-content: stretch; /* Added */
display: flex; /* Added */
flex-direction: column; /* Added */
}
.panel-container-right>div:first-child {
flex: 0 0 30px; /* Added */
}
.panel-right-data {
display: flex;
flex: 1 1 80%; /* Added */
flex-direction: column;
overflow-y: scroll;
}
.panel-right-data-item {
background-color: green;
color: white;
padding: 5px;
margin: 2px;
width: 20px;
}
/* Added */
.panel-container-left > div:first-child {
flex: 0 0 30px;
}
.panel-left-data {
flex: 1 1 80%; /* Added */
display: flex;
flex-direction: row;
overflow-x: scroll;
align-items: stretch; /* Added */
justify-content: flex-start; /* Added */
}
.panel-left-data-item {
background-color: blue;
color: white;
padding: 5px;
margin: 2px;
width: 80px;
}
And here's a fiddle: https://jsfiddle.net/wfL8q051/21/