Question

我需要像这样嵌套两个flexbox：

第一个有两个项目：一个按钮和一个div，div填充剩余的空间。

div也是一个带有3个项目的flexbox：2个按钮（左边和右边）和一个可滚动的中间div

.flex-container
{
   display: flex;
}

.flex-item-auto
{
     flex: 0 0 auto;  /* grow shrink basis */
}

.flex-item-fill
{
    flex: 1 1 auto;  
}

.middle
{
    overflow-x: scroll; 
}


.big
{
    width: 1000px;
    height: 20px;
    background-color: green;
}

<div class="flex-container">
    <button class="flex-item-auto">View All</button>
    <div class="flex-item-fill flex-container">
        <div class="flex-item-auto">Prev</div>
        <div class="middle flex-item-fill">
            <div class="big"></div>
        </div>
        <div class="flex-item-auto">Next</div>      
    </div>
</div>

在IE11上，它按预期工作，我可以看到右键，我可以滚动div。

但不是最新的Chrome和Firefox，这里整个页面都是可滚动的，而不仅仅是div。

我还需要让它在移动设备上运行（Safari 8，Android 4.3 +）

Answer 1

如下更新您的CSS。您需要在填充元素上将宽度设置为0（请参阅下面的注释）。

别忘了给＆＃34; flex＆＃34;旧浏览器版本上跨浏览器兼容性的属性

Flex支持：http://caniuse.com/#feat=flexbox

＆＃13;

.flex-container
{
   display: -webkit-flex;
   display: flex;
}

.flex-item-auto
{
     -webkit-flex: 0 0 auto;  /* grow shrink basis */
     flex: 0 0 auto;  /* grow shrink basis */
}

.flex-item-fill
{
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 0;
}

.left
{
    align-self:  -webkit-flex-start; /* align top */
    align-self:  flex-start; /* align top */
}

.middle
{
    background-color: green;
    /*white-space: nowrap;*/
    overflow-x: scroll; 
}

.next, .prev
{
    background-color: white;
}

.big
{
    width: 1000px;
    height: 20px;
}

＆＃13;

<div class="flex-container">
    <button class="left flex-item-auto">My Button</button>
    <div class="flex-item-fill flex-container">
        <div class="prev flex-item-auto">Prev</div>
        <div class="middle flex-item-fill">
           <div class="big"></div>
        </div>        
        <div class="next flex-item-auto">Next</div>      
    </div>
</div>

＆＃13;

注意：

显然你更喜欢制作液体布局而不是使用px，但是Firefox会忽略百分比的子宽度（想知道为什么整页flexbox演示都是px？）。哦，废话。解决方法是使用width：0并让box-flex指示事物。

Src：http://oli.jp/2011/css3-flexbox/

Answer 2

更新了答案

您只需将min-width: 0添加到滚动项的父级。

而不是：

.flex-item-fill {
    flex: 1 1 auto;  
}

试试这个：

.flex-item-fill {
    flex: 1 1 auto;
    min-width: 0;    /* NEW */ 
}

Revised Demo

有关解释，请参阅此答案：https://stackoverflow.com/a/34982902/3597276

原始答案

~~这似乎是Firefox中的一个错误。~~

如果您对.flex-item-fill略微调整，则布局将适用于IE11和Chrome：

.flex-item-fill { flex: 1; /* changed from `flex: 1 1 auto;` */ }

DEMO：https://jsfiddle.net/mLtwmc62/14/

几年前，Mozilla也提出了类似的错误。请参阅下面的链接，如果您向下滚动到最后一条评论，您将看到它是一个可能仍然存在的问题，它提供了一个可能的解决方法的提示。

~~https://bugzilla.mozilla.org/show_bug.cgi?id=570036~~

Answer 3

这是由于flex规范更新： https://drafts.csswg.org/css-flexbox/#min-size-auto

基本上根据新规范，flex-item-fill的最小宽度是其最小内容。解决方法是将flex-item-fill的min-width明确设置为0px。或者像LGSon那样将宽度设置为0px。

Chrome似乎还不支持这种新行为。

水平滚动适用于IE11但不适用于Chrome和Firefox

3 个答案: