Adding scroll to the final output view using ipywidgets

Question

I am trying to create an app based on ipywidgets. But unfortunately the scroll is not appearing as I expect it to be. Instead the scrolls are appearing on every output element, whereas I want a single scroll if the height of the content in any of the output element exceeds. Moreover it should not cut the visibility of the content in any of the output.

%%html
<style>
.out1{
      width: 700px;
      height: 400px;
      display: flex;
      justify-content: center;
      padding: 10px 10px 10px 10px;
      border: 1px solid black;
}

.out2{
      width: 350px;
      height: 400px;
      display: flex;
      justify-content: center;
      padding: 20px 5px 10px 10px;
      border: 1px solid black;
}

.out3{
      width: 350px;
      height: 400px;
      display: flex;
      justify-content: center;
      padding: 20px 5px 10px 10px;
      border: 1px solid black;

}

.out4{
      width: 700px;
      height: 400px;
      display: flex;
      justify-content: center;
      padding: 20px 10px 0px 10px;
      border: 1px solid black;
}

.out_box{
      border: 1px solid black;
      height: 800px;
      width: 700px;
      overflow: auto;
}
</style>

out1=widgets.Output()
out1.add_class('out1')

out2=widgets.Output()
out2.add_class('out2')

out3=widgets.Output()
out3.add_class('out3')

out4=widgets.Output()
out4.add_class('out4')

box1=widgets.Box([out1], scroll=False)
box2=widgets.HBox([out2,out3], scroll=False)
box3=widgets.Box([out4], scroll=False)

out_box=widgets.VBox([box1,box2,box3])
out_box.add_class('out_box')

Attached is the snap, which I am getting. Results with multiple scroll bars. But I want a single scroll bar at the right end.