Нижний колонтитул Flex не перемещается с выпадающим меню

У меня возникла проблема с раскрывающимся меню, расширяющим страницу с помощью полосы прокрутки, но нижний колонтитул внизу страницы не перемещается вниз.

Пример JSFiddle: https://jsfiddle.net/fmoctax3/

$('.ui.dropdown').dropdown();
html,
body {
  height: 100vh;
  min-height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-flow: column;
}

.main {
  flex: 1 1 auto;
  background: green;
}

.footer {
  background: orange;
}

.ui.dropdown {
  margin-left: 50vw;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>


<div class="main">
  <div class="ui floating dropdown">
    <label class="ui button">Dropdown</label>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
      <div class="item">Item</div>
    </div>
  </div>
</div>
<div class="footer">
  stuff<br>stuff<br>
</div>

Почему это происходит и как заставить нижний и основной колонтитулы расширяться?


css flexbox semantic-ui
person Douglas Gaskell    schedule 01.06.2017    source источник
comment
Почему нижний колонтитул может двигаться? Ваше меню расположено абсолютно так, что оно не влияет ни на какие другие элементы.   -  person Paulie_D    schedule 01.06.2017
comment
@Paulie_D Вот почему я спрашиваю, чтобы узнать, почему. Моих знаний CSS не хватает, я не дизайнер ни в каком смысле.   -  person Douglas Gaskell    schedule 01.06.2017
comment
Так что это ваш ответ. Если вы хотите, чтобы раскрывающийся список расширял основной элемент (в чем я, честно говоря, сомневаюсь... это было бы странно), вам нужно удалить абсолютное позиционирование. jsfiddle.net/fmoctax3   -  person Paulie_D    schedule 01.06.2017
comment
@Paulie_D Попался, спасибо за информацию.   -  person Douglas Gaskell    schedule 01.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

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

Просто добавьте приведенный ниже css,

.scroll{
  max-height:100px;
  overflow-y:auto;
  width:150px;
}

И примените «прокрутку» css к «меню» div.

 <div class="menu scroll">
person Pawan Kumar    schedule 01.06.2017