我无法理解以下示例的 overflow-x 和 overflow-y 属性

Question

如果我使用overflow-y = scroll; 属性，文本像往常一样垂直滚动。但是如果我再次使用 overflow-x = scroll; 属性，我在浏览器中看到方框显示左右箭头。好吧，但我无法向左或向右滚动维度，或者更具体地说是水平滚动。文本仍然垂直滚动。为什么在这种情况下文本没有水平滚动？？？

/* 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;
}

Answer 1

来自MDN docs,

The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.

在您的示例中，内容 NOT 溢出边缘并简单换行到下一行。这是因为您的容器中可能有简单的文本，而文本的 word-wrap 属性的正常值是 normal（“仅在允许的断点处断词”）。所以文字只是换行。

例如，如果您的 div 内部超出了此容器的宽度 - 那么您的 overflow 属性将会生效。或者，如果您的文本在内部是一个没有空格的连续字符串（因此不允许用 normal 换行），宽度大于父级的宽度，滚动条将可见。

我在下面添加了一些示例来证明这一点：

.box {
  border: 1px solid black;
  height: 200px;
  width: 100px;
  margin: 10px;
  font-family: sans-serif;
  display: inline-block;
}

.long-box {
 width: 300px;
}

.scroll-x {
  overflow-x: scroll;
}

.word-wrap {
  word-wrap: break-word;
}

<!-- 
    Doesnot scroll, 
    width adheres to left/right edges 
-->
<div class='box scroll-x'>
  <b>Will not scroll</b>
  Scroll X with content less than width
</div>

<!-- 
     Will not scroll, 
     because of the really long word,
     and since `word-wrap` by default is `normal` so the content overflows 
-->
<div class='box scroll-x'>
  <b>Will scroll</b>
    Scroll X with content greater than width 
  LoremipsumLoreLoremipsumLoremLoremipsumLoremLoremipsumLorem
</div>

<!--
     Will not scroll 
     because this now has `word-wrap` set to `break-word`-->
<div class='box scroll-x word-wrap'>
  <b>Will not scroll</b>
  Scroll X with content greater than width but with word wrap
  LoremipsumLoreLoremipsumLoremLoremipsumLoremLoremipsumLorem
</div>

<!-- 
     Will scroll, 
     because of the div inside,
     that is 300px, i.e > width of box (200px) 
-->
<div class='box scroll-x'>
  <b>Will scroll</b>
  Scroll X with content (long-box) greater width 
  <div class='long-box'>...</div>
</div>

Answer 2

试试这个。

.yourclass {
  overflow-y: auto;
}

.yourclass {
  overflow-x: auto;
}

我无法理解以下示例的 overflow-x 和 overflow-y 属性

I can't understand the overflow-x and overflow-y property of this following example

css

overflow