Как автоматически выровнять выпадающий список влево / вправо в зависимости от ширины вида, используя styled-component?

Question

Я создаю верхнее навигационное меню следующим образом, используя styled-компоненты:

const StyledUl = styled.ul `
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: grey;
    box-sizing: border-box;
`;

const BlockDiv = styled.div `
    display: flex;
    flex-direction: row;
`;

const StyledLi = styled.li `
    display: flex;
`;

const SubA = styled.a `
    color: white;
    padding: 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    &:hover {
        background-color: blue;
    }
`;

const EnterpriseLi = styled.div `
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background-color: grey;
`;


const UserDropBtn = styled.div `
    display: flex;
    padding: 10px;
    background-color: grey;
    text-align: center;
    color: white;
    &:hover {
        background-color: blue;
        color: white;
    }
`;

const SubMenuTitleDiv = styled.div `
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0px;
    margin: 0px;
`;

const DropDownContent = styled.div `
    background-color: grey;
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
`;

const DropDownLi = styled(StyledLi)
`
    display: inline-block;
    &:hover ${DropDownContent} {
        display: block;
    }
`;

const UserDropDownLi = styled(DropDownLi)
`
    margin-left: auto;
`;



const TitleDiv = styled.div `
    display: flex;
    flex-direction: row;
    align-items: center;
`;

class Nav extends React.Component {
  getUserDropDown = () => {
    return ( <
      UserDropDownLi >
      <
      UserDropBtn >
      <
      SubMenuTitleDiv >
      Username <
      /SubMenuTitleDiv> < /
      UserDropBtn > <
      DropDownContent >
      <
      SubA > Option < /SubA> <
      SubA > Option < /SubA> <
      SubA > Option < /SubA> < /
      DropDownContent > <
      /UserDropDownLi>
    );
  };

  render = () => {
    let userDropDown = this.getUserDropDown();

    return ( <
        StyledUl >
        <
        TitleDiv > Main Menu < /TitleDiv> <
        BlockDiv >
        <
        EnterpriseLi > ACME Company < /EnterpriseLi> {
        userDropDown
      } <
      /BlockDiv> < /
      StyledUl >
  );
};
}

ReactDOM.render( <
  Nav / > ,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.1/styled-components.cjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

Моя проблема в том, что открывается раскрывающееся меню. Он добавляет горизонтальную прокрутку к окну.

Мне нужно, чтобы раскрывающийся список открывался справа, если он выходит за пределы размера представления (с правого поля) и открывался нормально слева. Как я могу это исправить?

PS: я не могу заставить работать фрагмент, но я оставил сообщение, чтобы помочь, если кто-то сможет это исправить.