拉伸或滚动父柔性盒

我有以下的HTML和我试图让要么伸展或滚动父柔性盒没有固定宽度的CSS。我似乎无法得到任何结果。拉伸或滚动父柔性盒

不管有多少box类添加，它不会使柔性盒拉伸或滚动。我希望能有即使这意味着要能够滚动300的box宽度，但它的作用是使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; 
}

来源

2014-10-29 Tek

放置宽度：100％在您的flex元素上会使其达到100％的身体（在您的情况下） – maioman 2015-01-06 21:35:45

正确，这就是为什么我正在寻找一种不涉及“width：9999px”解决方案的解决方案; ） – Tek 2015-01-06 21:58:18

有些日子我回答了一个问题，给出了一个问题设置的解决方案'{width：500％;显示：flex}'到父元素。如果你想[看看]（http://stackoverflow.com/questions/27702110/css-horizontal-scroll-tricks/27703546#27703546）（也有一个片段） – maioman 2015-01-06 22:04:06

尝试用，我想100％的方式填写父容器是窗口宽度，所以你不能得到比

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

JSFIDDLE

更宽

另外如果你想保持这个position: relative;保持身高值，所以下一个元素显示后，你可以这样包装它

JFSIDDLE

来源

2015-01-06 21:34:23

正是我想要的东西。美丽。：D – Tek 2015-01-06 21:59:02

其实，最后一个例子应该是可滚动的吗？ - 没关系，将“overflow”改为“scroll”。简直太棒了，你超越了。谢谢。 – Tek 2015-01-06 22:02:07

我很高兴我可以帮你:) – 2015-01-06 22:07:08

这里的问题是，你设置相对width:100%你flex DIV，与其父甚至没有一个固定的宽度，使问题是什么100％？，所以当你做一个固定的宽度到父DIV（体为例）的问题将得到解决：

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

，给你挠DIV一个display: inline;或display: table;，因为display: flex;将迫使DIV是一个块级柔性容器。

这是一个working fiddle。

我认为应该这样做。

来源

2015-01-06 21:54:40

即使如此，它不会保留类“盒子”的宽度300px。在这个例子中，框为137像素 – Tek 2015-01-06 21:56:11

@Tek：指出我错过了，它通过给flex div一个'display：inline;'或'display：table;'来修复，我将编辑我的答案。 – 2015-01-06 22:00:44

拉伸或滚动父柔性盒

回答

相关问题