Question

我有以下HTML和CSS，我试图伸展或滚动父Flex框没有静态宽度。我似乎无法得到任何结果。

无论我添加了多少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% div设置一个 relative flex，它的父级甚至没有固定的宽度，所以问题是100％的什么？，所以当你为父div（例如正文）设定一个固定宽度时，问题就会解决：

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

并为您的flex div添加display: inline;或display: table;，因为display: flex;会强制div成为块级Flex容器。

这是 working fiddle 。

我认为应该这样做。

拉伸或滚动父Flex框

2 个答案: