Абсолютно позиционируемый элемент и заставляющий его вести себя с текстом, который нужно переносить только иногда

Question

Я даже не уверен, как сформулировать этот вопрос, так что простите, если в нем есть некоторая неопределенность.

Сейчас у меня есть кнопка, которую я использую Vue для создания -нажмите раскрывающийся список. Вот структура:

<button class="aui btn btn-dropdown btn-primary"> 
     <i class="fa fa-bars"></i> 
     <ul class="dropdown-menu right">
          <li>Save as new order</li><li>Email to customer for approval</li>
          <li>Set order to needs payment</li>
          <li>Set order to needs ordering</li>
     </ul>
</button>

Проблема, с которой я сталкиваюсь, связана с шириной этого ul. Если я использую white-space: nowrap здесь, я получаю переполнение (очевидно), но ширина элемента "правильная"; то есть он расширяется, чтобы заполнить пространство окна, в котором он нуждается, и сжимается, когда окно становится слишком маленьким. Однако текст (так как я использую nowrap) этого не делает, а текст li переполняет элементы li и ul. Мой вопрос в том, как заставить этот элемент вести себя так, как будто теперь применен nowrap, но текст все еще переносится, когда окно. Другими словами, как я могу заставить элемент заполнять столько окна, сколько ему нужно, чтобы поддерживать одну строку текста в li, если в окне недостаточно места?

Тег ul стиль:

    position: absolute;
    top: 2.35rem;
    margin: 0;
    padding: .5rem 1rem;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    color: #000;
    list-style: none;
    z-index: 1;
    max-width: calc(100vw - 6rem)

и теги li имеют стиль:

    padding: .25rem 0;
    white-space: nowrap;
    text-align: left;