将子<div>相对于父<div>向左或向右定位，具体取决于其屏幕位置

Question

我正在建立一个菜单结构，它将在鼠标悬停时打开一个子菜单。子菜单通常在菜单项的右侧打开。

当菜单位于屏幕右侧时，出现问题，打开子菜单时不会显示选项的全文，因为它将离开屏幕。

我需要一种方法来解决这个问题，方法是选择左侧或右侧打开，具体取决于屏幕上的位置或子菜单的剩余空间。

以下是代码：

<h1>
 Left Menu
</h1>
<div class='menu-container'>
  <ul>
    <li class='option'>
      Option 1
      <div class='submenu-container'>
         <ul>
            <li>Submenu option 1</li>
            <li>Submenu option 2</li>
            <li>Submenu option 3</li>
         </ul>
      </div>
   </li>
  </ul>
</div>

<h1>
 Right Menu
</h1>
<div class='menu-container menu-right'>
  <ul>
    <li class='option'>
      Option 1
      <div class='submenu-container'>
         <ul>
            <li>Submenu option 1</li>
            <li>Submenu option 2</li>
            <li>Submenu option 3</li>
         </ul>
      </div>
   </li>
  </ul>
</div>

CSS：

.menu-container { 
   display: inline-block;
   background-color: grey;
   width: 100px;
   height: 50px;
   text-align: center;
}

.menu-container li {
  list-style: none;
}

.menu-container ul {
  text-decoration: none;
  padding: 0px;
}

.option {
  display: inline-block;
  position: relative;
  background-color: white;
}

.submenu-container { 
   display: inline-block;
   position: absolute;
   background-color: red;
   white-space: nowrap;
   width: auto;
   height: auto;
   text-align: center;
   visibility: hidden;
}

.option:hover .submenu-container {
  visibility: visible;
}

.menu-right {
  float: right;
}

我设置了fiddle case here.

PS：解决方案不应该使用JQuery，因为我在最后一个用例中使用了ReactJS。