html - 宽度 :auto not working right for absolutely positioned div when scroll bar is present

Question

我有一个 div，其中包含一些绝对定位且具有明确高度的内容。当内容超出高度时，会出现一个滚动条，但它不符合我的 width:auto - 滚动条会覆盖内容。

例子:

<style>    
    #main {
        height: 100px;
        border: 1px solid red;
        overflow-y: auto;
        position: absolute;
    }

</style>

<div id='main'>
    <div>test</div>
    <div>test</div>
    <div>testiiiiiiiing</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
</div>

这是怎么回事？这是浏览器错误吗？我怎样才能让它正确地尊重我的自动宽度？

Answer 1

可以使用overflow-y: scroll;

<style>

 #main {
      height: 100px;
      border: 1px solid red;
      overflow-y: auto;
      position: absolute;
      padding-right: 10px;
    }
 #a {}

</style>

CodePen