内容元素覆盖的大小调整机制

Question

调整大小机制由Chrome上的#inner元素覆盖，但在Firefox上显示。

以下是示例代码：

＆＃13;

＆＃13;

<div id="outer" style="width:200px; height: 30px; background: lightgreen; overflow: hidden; resize: both; position: relative;">
  <div id="inner" style="position: absolute; right: 0; width: 100px; height: 100%; background: lightblue;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

结果：

铬：

火狐：

第一个问题是：哪种行为是正确的？或者是否应该规定浏览器应该做什么？

第二个问题是：我希望所有浏览器都显示调整大小机制（就像Firefox所做的那样），这样我就可以调整#outer元素的大小。有没有解决方法？

Answer 1

更改了绿色和蓝色的位置，因此左侧显示蓝色并显示调整大小。

＆＃13;

＆＃13;

<div id="outer" style="width:200px; height: 30px; background: lightblue; overflow: hidden; resize: both; position: relative;">
  <div id="inner" style="right: 0; width: 100px; height: 100%; background: lightgreen;"></div>
</div>

＆＃13;

＆＃13;

＆＃13;