Horizontal scroll on parent, vertical scroll on child

Question

I have one div container and another div inside container. I would like to add scrolling horizontal on parent (container div) and vertical on child to see the text inside those divs. Any help?

There is a stackblitz to show my problem. https://stackblitz.com/edit/angular-ivy-t98oj8

 .container { width: 300px; height: 200px; border: 2px solid; display: flex; overflow-x: scroll; overflow-y: hidden; flex-direction: row; } .one { width: 100%; height: 300px; overflow-x: hidden; overflow-y: scroll; position: relative; border: 2px red solid; } .text { width: 400px; }

 <div class="container"> <div class="one"> <div class="text"> Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </div> </div> </div>

Answer 1

You just need to modify class .one with:

  /* ADDED */
  min-width: 400px;
  max-width: 400px;
  height:100%;

The width that you set in text should be set in the parent. And you need to set the height to 100% (instead of 300px), otherwise you ever see the end of your scroll block.

 .container { width: 300px; height: 200px; border: 2px solid; display: flex; overflow-x: scroll; overflow-y: hidden; flex-direction: row; } .one { width:100%; height: 300px; overflow-x: hidden; overflow-y: scroll; position: relative; border: 2px red solid; /* ADDED */ min-width: 400px; max-width: 400px; height:100%; } .text { width: 400px; }

 <div class="container"> <div class="one"> <div class="text"> Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </div> </div> </div>