Выровнять div сверху до нижней части родственного div

Question

Я хочу разместить dropdownContainer ниже inputContainer, но без dropdownContainer, заключенного в autocompleteContainer.

При прокрутке dropdownContainer должен перемещаться с помощью inputContainer. То же самое, когда разделители токенов удаляются или добавляются.

Если удалить позицию: абсолютная от dropdownContainer она выравнивает правильно, но появляется внутри autocompleteContainer

я предпочел бы сделать это без JS/JQuery, но я буду использовать его, если нет другого выбора.

Вот codepen ссылка: http://codepen.io/rishadjb/pen/LRxzpN

Спасибо.

.mainContainer{ 
 
    width:700px; 
 
    position: relative; 
 
} 
 
.autocompleteContainer{ 
 
    background: none repeat scroll 0 0 #ececec; 
 
    float: left; 
 
    width: 100%; 
 
/* height:60px; */ 
 
    max-height: 100px; 
 
    z-index: 1; 
 
    padding: 4px 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    cursor: text; 
 
    text-align: left; 
 
    background-color: #e4e4e4; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
.token{ 
 
     background-color: #f7982f; 
 
    border-radius: 10px; 
 
    color: #fff; 
 
    display: flex; 
 
    font-family: sans-serif; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
    margin: 2px; 
 
    padding: 2px 5px; 
 
} 
 

 
.inputContainer{ 
 
     flex-grow: 1; 
 
    position:relative; 
 
} 
 

 
.autoCompleteInput{ 
 
     border: medium none; 
 
    outline: none; 
 
    width: 100%; 
 
    padding: 2px 12px; 
 
    background: transparent; 
 
    color: #008cc1; 
 
} 
 

 
.dropdownContainer{ 
 
    height:60px; 
 
    width:100%; 
 
    position:absolute; 
 
    background:red; 
 
    z-index:999; 
 
    border:1px solid blue; 
 
}

<div class="mainContainer"> 
 
    <div class="autocompleteContainer"> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    <div class="token">TokenToken</div> 
 
    <div class="token">TokenTokenTokenToken</div> 
 
    
 
    <div class="inputContainer"> 
 
     <input class="autoCompleteInput" value='inputText'/> 
 
    </div> 
 
    
 
    <div class="dropdownContainer">Dropdown Container</div> 
 
    
 
    
 
    </div> 
 
</div>

Answer 1

ли .autocompleteContainer должен плавать? Если удалить эту декларацию, то все, что вам нужно сделать, это добавить в dropdownContainer:

.dropdownContainer{ 
    left: 0; 
    top: 100%; 
}