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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>