Scrollbar for rich:panel when width is in percentage

[leelavathic]

I have a h:panel grid with following data:
<h:panelGrid columns="2" styleClass="widthClass" columnClasses="col1,col2" >

.col1{
vertical-align:top;
height:100%;
width:30%;
}
.col2{
vertical-align:top;
height:100%;
width:70%;
}
.widthClass{
width:100%;
}

In the Col1(left column) I'm displaying a rich tree component and in the Col2(right column) I'm displaying data related to the component selected in the Col1.

Inside the Col1 I'm using a rich:panel to display data
<rich:panel styleClass="treeClass" >
.treeClass{
height:510px;
overflow:auto;
width:220px;
}

The problem that I face is if the screen(Monitor) is quite big then the scrollbar is coming only for a part of the Col1(left column):

|<---------Col1---------------------->|<------------Col2-------------->|
(***********)************|*************************
|<--Scrollbar-->|

I think since in a bigger screen 220px for rich:panel is smaller than 30% of Col1. But I need the scrollbar to be displayed inline with Col1 ie,

|<---------Col1---------------------->|<------------Col2-------------->|
(*************************)|************************
|<-----------Scrollbar--------------->|

Can anyone suggest a solution for this problem.

Thanx in advance.

[ilya_shaikovsky]

So try to remove width from the panel and remain only overflow definition

[leelavathic]

I want the panel to occupy the complete screen area, that's why gave it as 30% and 70%

[ilya_shaikovsky]

I mean remove width which defined in px from tree class.

[leelavathic]

When I removed the width in px from the treeClass and retained the overflow definition the scrollbar is not displayed if the rich tree component is very large (if rich tree component name is quite big)instead the col1 is extending horizontally and col2 width is decreasing