拉伸或滚动父级伸缩框

Question

I have the following HTML and CSS that I'm trying to get to either stretch or scroll the parent flex box without a static width. I can't seem to get either result.

No matter how many box classes I add, it doesn't make the flex box stretch or scrollable. I want to be able to have a box of 300 width even if it means to be able to scroll but all it does is make box smaller and doesn't respect the width of it.

JSFiddle here: 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

Try with, with my thinking 100% its means fill parent container which is window width so you cant get wider than that

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

JSFIDDLE

Plus if you want keep this position: relative; to keep height value so next element show after this one you can wrap it like this

JFSIDDLE

Answer 2

The problem here is that you are setting a relative width:100% to you flex div, and its parent doesn't even have a fixed width so the problem is 100% of what? , so when you make a fixed width to your parent div (body for example) the problem will be solved:

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

And Give your flex div a display: inline; or display: table; , because display: flex; will force the div to be a block-level flex container.

This is a working fiddle .

I think that should do it.