实施响应式溢出覆盖

Question

如何在不调整其内容大小的情况下使带有滚动条的块出现。而且应该及时响应。与Chrome中的overflow: overlay相同。

示例：

模板：http://jsfiddle.net/3gf520ht/

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
main { width: 80%; height: 80%; margin: 10vh auto; border: 1px solid; }
article { text-align: justify; }

main {
  padding: 0 2em;
  overflow: overlay;
}

article {
}

<main>
  <article>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque convallis vestibulum. Proin sed porta urna, eu fermentum velit. Nulla quis accumsan augue, mollis eleifend felis. Aenean venenatis faucibus erat, non ornare ex efficitur ut. Ut ligula urna, auctor non velit quis, ultricies aliquet diam. Nulla quis scelerisque nisl, rutrum consectetur diam. Etiam bibendum tellus orci, iaculis varius risus congue vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum sed velit sit amet quam ultrices facilisis. Mauris malesuada vehicula purus, in blandit lectus pellentesque in. Duis luctus, risus et molestie venenatis, libero ligula volutpat augue, vitae bibendum arcu leo vel ligula. Etiam aliquet semper velit ut fringilla.</article>
</main>

PS：Same question in Russian.