Popper.js и flex-end вызывают переполнение тела - PullRequest
Новая
       32

Popper.js и flex-end вызывают переполнение тела

0 голосов
/ 04 марта 2019

В моем проекте у меня есть список выпадающих кнопок, которые выровнены по правому краю, используя flex-end.Я создал очень минимальную версию кода, которая показывает проблему: 

var popper = new Popper(
  $('#anchor')[0],
  $('#popper')[0],
  {
    modifiers: {
      preventOverflow: {
        enabled: true,
        boundariesElement: 'window'
      }
    }
  }
);
body {
  height: 2000px;
}
.parent {
  display: flex;
  justify-content: flex-end;
}
.anchor {
  width: 40px;
  height: 40px;
  
  background-color: #333;
}
.popper {
  width: 120px;
  height: 80px;
  
  background-color: #c23;
  border: 2px solid #ae3;
}

ul {
  list-style-type: none;
  margin: 0 -6px;
}
li {
  margin: 0 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>

<ul class="parent">
  <li><div class="anchor"></div></li>
  <li><div class="anchor"></div></li>
  <li><div class="anchor"></div></li>
  <li>
    <div class="anchor" id="anchor"></div>
    <div class="popper" id="popper"></div>
  </li>
</ul>

Как видно выше, .popper div переполнен body;вызывая появление полосы прокрутки.

Удаление li заставляет Поппера работать должным образом, но я не могу этого сделать, так как потерял бы свой список.Использование flex-start вместо -end также работает правильно.

Стоит отметить, что элементы .popper и .anchor могут иметь любую ширину в зависимости от того, что в них содержится.

Существуют ли обходные пути или решения для такого поведения?Желательно, без изменения какой-либо разметки.

...