Основное содержимое переполняется на боковой панели при прокрутке, используя залипание для прикрепления боковой панели

Question

Я использую stickybits (https://github.com/dollarshaveclub/stickybits), чтобы прикреплять мой div sidebar_content (встроенный блок) при прокрутке. При прокрутке мой div main_content (также встроенный блок) идет за sidebar_content, и это тактолько в IE. Отлично работает на Chrome, Firefox, Microsoft Edge и Safari. Согласно документации,

Поскольку Stickybits минимальна, когда позиция: sticky не поддерживается Stickybits будет использовать позицию: исправленокоторый относится к окну браузера. Если родительский элемент StickyBits имеет высоту, распознаваемую браузером, Stickybits позаботится о вызове липкой верхней части и липкой нижней части. Если высота родительского элемента не распознается браузером, возникнут проблемы.

Я знаю, что IE не поддерживает position: sticky. Я пробовал overflow: hidden; на теле и других вещах, но это, похоже, не работает. Это то, что я до сих пор:

/* Main container that contains both main_content and sidebar_content */
.container {
    margin: 0 auto;
    max-width: 1150px;
    display: block;
}
.main_content {
    display: inline-block;
    max-width: 60%;
    padding-top: 0;
}
.sidebar_content {
    display: inline-block;
    vertical-align: top;
    padding-top: 5%;
    max-width: 30%;
    font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/stickybits/3.7.2/stickybits.js"></script>
<div class="container">
  <div class="sidebar_content">
    This is my sidebar
  </div>
  <div class="main_content">
    This is my main content
  </div>
</div>

Я не уверен, что я здесь делаю неправильно.