overflow:auto не срабатывает

Прошу помочь. Есть 3 блока #main и в нем лежат #left и #right

Почему при переполнении в #left появляется scroll как мне и надо а в #right этого не происходит, зато увеличивается размер #main Как сделать, чтобы #main остался неизменным, а #left и #right появлялся при переполнении scroll

index.html:

<div id="main">
            <div id="left"></div>
            <div id="right"></div>
        </div>

style.css:

#main { 
        min-height:calc(100vh - 7.5em);
        width:calc(100%-30px);
        margin:0 15px;
        border:15px solid #525252;
      }
#left { height:calc(100vh - 7.5em - 30px);
        width:42%;
        border-right-width:15px; 
        border-right-color:#525252;
        border-right-style:solid;
        float:left;
        overflow:auto;
      } 
#right {overflow:auto;}