Горизонтальная прокрутка только для выпадающих кнопок

Question

Требования:

• Только кнопки должны быть По горизонтали Прокручиваемые
• Должно быть выпадающее меню кнопок, то есть чуть нижекнопка как обычно
• Выпадающий список кнопок не должен сдвигать абзац ниже, а должен находиться просто поверх пункта

То, что я пробовал:

• overflow:hidden/auto

• overflow-x:auto

position:static, работаетно это толкает содержимое вниз

.outer {
  border: 2px solid red;
  width: 70%;
  margin: auto;
  display: flex;
  overflow: auto;
  height: max-content;
  margin-top: 10vh;
}

.side {
  margin-right: 10px;
}

.dropdown-menu {
  position: static !important;
}

.para {
  width: 80%;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="outer">
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>
  <div class="side">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </div>
  </div>

</div>
<div class="para">
  <p>
    The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button
    is a dropdown. Add the .dropdown-menu class to a
    <ul> element to actually build the dropdown menu.
  </p>
</div>

Answer 1

Действительно трудно объяснить, в чем проблема, но это связано с overflow-x:auto, который также влияет на overflow-y (я не уверен почему), предотвращая появление элементов с абсолютным позиционированием вне элемента.

Я создал дополнительную обертку и сделал выпадающие списки относительно нее.Оболочка имеет свойство overflow: visible по умолчанию, так что .dropdown-menu может появляться вне элемента.

Однако это означало, что положение .dropdown-menu больше не было относительно обертки .dropdown, поэтомуони всегда появляются в одной и той же позиции.

Мне пришлось написать немного jQuery, чтобы компенсировать это, а также компенсировать, когда была активирована горизонтальная прокрутка .outer элементов.

Я такжедобавили дополнительный элемент-обертку вокруг всего с overflow:hidden;, чтобы выпадающие списки были обрезаны при прокрутке вне оболочки .outer.

// Detect dropdown event
$(".dropdown").on("show.bs.dropdown", function(event){
  // get offset position of selected button and subtract scroll .outer scroll position
  var buttonPos = parseInt(event.currentTarget.offsetLeft) - parseInt($(".outer").scrollLeft());
  // Apply button position to dropdown
  $(this).find(".dropdown-menu").css("left", buttonPos);
  // Store buttons offset position to be used to calculate the dropdowns position when .outer is scrolled
  $(this).find(".dropdown-menu").attr("data-leftPos", event.currentTarget.offsetLeft);
});
// Detect when .outer is scrolled
$(".outer").on("scroll", function() {
  var activeDropdown = $('.dropdown.open').find('.dropdown-menu');
  // subtract scroll position from buttons offset position
  var pos = parseInt(activeDropdown.attr('data-leftPos')) - parseInt($(this).scrollLeft());
  // appply updated position to dropdown
  activeDropdown.css("left", pos);
});

html, body {
 height:100%;
}
.wrapper {
  /*  remove overflow-x if you want the dropdowns to appear outside of the .outer element */
  overflow-x:hidden;
  width: 70%;
  margin: 0 auto;
  min-height: 100%;
  padding-top:10vh;
}
.external-dropdown {
  position: relative;
}
.external-dropdown .dropdown, .external-dropdown .dropup {
  position: static;
}
.outer {
  border: 2px solid red;
  display: flex;
  overflow-x: auto;
}
.side {
  margin-right: 10px;
}
.para {
  width: 80%;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrapper">
  <div class="external-dropdown">
    <div class="outer">
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
      <div class="side">
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="para">
    <p>
      The .dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button
      is a dropdown. Add the .dropdown-menu class to a
    </p>
  </div>

</div>