title: I can't understand the overflow-x and overflow-y property of this following example
body: <p>If I use overflow-y = scroll; property, the texts are scrolled vertically as usual. But again If I use overflow-x = scroll; property, I see in the browser that the box shows the left and right arrow. Well, but I can't scroll left or right dimension or more specifically to say horizontally. The text still scrolled vertically. Why the text isn't scrolled horizontally in this case???</p>
  <pre><code>/* Here is the example of overflow property */
  .box {
      height: 100px;
      width: 200px;
      border: 4px solid green;
      overflow-x: scroll;
  }
  
  .box {
      height: 100px;
      width: 200px;
      border: 4px solid green;
      overflow-y: scroll;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/lCtuJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lCtuJ.png" alt="the 1st pic is when I use overflow-x: scroll; property" /></a></p>
  <p><a href="https://i.stack.imgur.com/WPIcP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WPIcP.png" alt="the 2nd pic is when I use overflow-y: scroll; property" /></a></p>