Поплавок дива внутри Абсолютного DIV с относительным Родителем

Question

Я не смог найти какие-либо дубликаты этого, так что здесь идет ...

http://jsfiddle.net/bmyLru9w/

<div style="height: 200px; width: 200px; background-color:#ff0000"></div> 
<div id="base" style="height: 30px; width: 30px; background-color:#00ff00"> 
    <div id="popup"> 
     <div> 
     <div class="in-pop"></div> 
     <div class="in-pop"></div> 
     <div class="in-pop"></div> 
      <div class="in-pop"></div></div> 
    </div> 
</div> 

.in-pop{ 
    background-color:#ffff00; 
    width: 20px; 
    height: 20px; 
    border: 1px solid #000; 
    float: left; 
} 

#base{ 
    position:relative; 
} 

#popup{ 
    background-color:#0000ff; 
    position:absolute; 
    bottom: 30px; 
} 

У меня есть DIV (зеленый), который сидит на в нижней части моего содержания. Мне нужно всплывающее окно (для зависания), чтобы оно было на вершине этого зеленого div. Всплывающее окно синего цвета на скрипке. Затем внутри этого всплывающего окна у меня есть неизвестное количество div, которые являются float: left. Моя проблема в том, что они складываются вертикально, а не горизонтально, и я не могу определить ширину синего div, потому что он изменяется. Кажется, это происходит из-за «относительного» зеленого div, но тогда, если я этого не сделаю, я не могу правильно позиционировать синий div поверх него.

Я мог бы использовать положение: фиксированное и отрицательное верхнее поле, но отрицательные поля довольно грубые. Может быть, это мой единственный вариант.

Любые идеи?

Answer 1

Вы можете попробовать добавить это:

#popup{ 
    width: 100vw; 
} 

Это позволит сделать синий ДИВ всегда ширина окна просмотра, так что ваши элементы могут плавать, как вы ожидаете.

Смотреть это fiddle

Другой способ может быть таким:

#popup{ 
    display:flex; 
} 

Смотреть это fiddle

Answer 2

Ваш #base имеет фиксированную ширину 30px, которая заставляет что-либо в нем, чтобы быть в MOST 30px широкий.

Редактировать

Мне нравится решение zgood дал с помощью Flexbox. Вот как настроить flex так, чтобы он работал в абсолютном большинстве браузеров:

display : -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display : -moz-box;  /* OLD - Firefox 19- (doesn't work very well) */ 
display : -ms-flexbox; /* TWEENER - IE 10 */ 
display : -webkit-flex; /* NEW - Chrome */ 
display : flex;   /* NEW, Spec - Opera 12.1, Firefox 20+ */