求助，神奇的 css，为何 overflow 了也没有左右滚动条？

[sillydaddy]

设置父 div 的 overflow 为 scroll，如果它的子 div 的 left 设置为 100(从右侧 overflow)，那么父 div 就有左右滚动条；如果 left 设置为-100(从左侧 overflow)就没有滚动条了。

这是为什么呢？难道从左侧 overflow 和从右侧 overflow 还有区别吗？(测试了 chrome 和 firefox 都是这样的)

---

没有左右滚动条：

<div style="position:relative; left:400px;overflow:scroll;width:200px;height:200px;background:red">

 <div style="position:relative; left:-100px;top:100px;width:200px;height:200px;background:blue">
 </div>

</div>

---

有左右滚动条(与上面的唯一的区别是 left 由-100px 改为了 100px)：

<div style="position:relative; left:400px;overflow:scroll;width:200px;height:200px;background:red">

 <div style="position:relative; left:100px;top:100px;width:200px;height:200px;background:blue">
 </div>

</div>

[fzhyzamt]

你加上这个试试
```html
div {
direction: rtl;
}
```

[sillydaddy]

@fzhyzamt
这样就反过来了，left=-100px 有滚动条，left=100px 就没有了。哈哈。

[kop1989]

没有时间去细翻 CSS Overflow Module Level 3 （ https://drafts.csswg.org/css-overflow-3/#propdef-overflow ）

以下说一下我的揣测：
1 、当默认情况下，html 的左上角为 0，0，而且元素方向是由左到右。
2 、overflow 应该是针对父容器的元素方向来解释的。换句话说，默认情况下，overflow 的原点是左上角的 0,0 只处理右下方向的溢出。
3 、同理，当你给一个网页的元素负值时，浏览器的 scrollBar 也不会自动出现（即 0，0 位置不会改变）

[Kenmin]

滚动条位置不能为负数……

[kop1989]

4 、scrollBar 的起点应该是基于父元素 0，0 而来的。

[Ly0n]

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

MDN 文档上说：overflow: scroll; /* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */

我猜是因为你设置负数，在浏览器解析的时候认为这个元素不在可视范围内了不算是修剪，所有没有滚动条


[sillydaddy]

@kop1989
@Kenmin
@cloverliang9721
应该是这样的

[DL9412]

根据 https://drafts.csswg.org/css-overflow-3/#scrollable-overflow-region 的描述，and the scrollable overflow rectangle is the minimal rectangle whose axes are aligned to the box’s axes and that contains the scrollable overflow area.
大致意思是可滚动溢出区域是根据盒模型的轴方向计算出的最小矩形？

然后关于盒模型的轴定义，我只找到了 https://drafts.csswg.org/css-writing-modes-3/#logical-directions，这里面两个 start 的定义就是盒模型的一端，对 end 的定义实在没看懂。

大致上来说就是盒子的轴在默认情况下就是从左端开始的？