Layout width, overlap and horizontal scroll bar

Basically I have a HorizontalLayout that looks like this, when the resolution is high enough:

and when a person zooms in, or changes the resolution to a smaller one, I would like the layout to do something like this:

Uploaded with

Basically, what I am trying to do is let the setExpandRatios affect only the empty space and never go outside the border of the given layout component. In other words, the two columns on the sides should always have the same width and the only thing that should collapse is the middle component, as long as there is available space.

Current implementation:

  1. Set HorizontalLayout width to 100%.
  2. Set the components(i.e a table, menu etc), within a given horizontalLayout column, to a specific width in “px”.

This works as far as the overlap, however what happens is that eventually when I zoom in too far, the components get cutoff, yet I do not get a scroll bar on the bottom. I understand that this is caused by setting the horizontalLayout Width to 100%(ie the width of the browser window). Is there a way to solve this and basically have a scroll bar on the bottom once the empty spaces gets depleted?