Прозрачная или прокручивающая родительская гибкая коробка

Question

У меня есть следующие HTML и CSS, которые я пытаюсь либо растянуть, либо прокрутить родительский гибкий блок без статической ширины. Я не могу получить результат.

Независимо от того, сколько классов box я добавляю, это не делает растягивание или прокрутку гибкой коробки. Я хочу иметь размер box шириной 300, даже если это означает возможность прокрутки, но все, что он делает, составляет box меньше и не учитывает его ширину.

JSFiddle здесь: http://jsfiddle.net/r4j778xg/2/

<div class="flex"> 
<div class="box">stuff</div> 
<div class="box">stuff</div> 
<div class="box">stuff</div> 
...many more 
</div> 

.flex 
{ 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
} 

.box 
{ 
    width: 300px; 
    height: 50px; 
    border: solid black 1px; 
} 

Answer 1

Попробовать, с моим мышлением 100% средства для заполнения родительского контейнера, который является шириной окна, так что вы не можете получить более широкими, чем того

.flex{ 
    width: auto; 
    position: absolute; 
} 

JSFIDDLE

Плюс, если вы хотите сохранить это position: relative;, чтобы сохранить значение высоты, чтобы следующий элемент появился после этого, вы можете обернуть его вот так:

JFSIDDLE

Answer 2

Проблема здесь состоит в том, что вы устанавливаете относительнойwidth:100% вам flex DIV, и его родитель даже не имеют фиксированную ширину, так проблема на 100% от чего?, поэтому, когда вы делаете фиксированную ширину вашего родительского DIV (тело, например), то проблема будет решена:

body{ 
    width:1096px; 
    height:960px; 
} 

и дать прогибается ДИВ display: inline; или display: table;, потому что display: flex; заставит DIV быть блочный гибкий контейнер.

Это working fiddle.

Я думаю, что должен это сделать.