Flex item getting our of flex container (horizontal)

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>

.panel-left-data height: 100%

2 Answers
2

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 !

height: 100%;

.panel-left-data

.panel-container-left

.panel-container

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>

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/

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.