火狐、Flexbox 和溢出 [英] Firefox, Flexbox & overflow

问题描述

在上次 firefox-update 之后，一些 css3 代码被破坏了... 示例 (jsfiddle).

• 在铬中:
• 在 Firefox 34 中:

是bug吗?还是正常上班?我需要更改什么才能修复它?为什么 #flex 不能正确调整大小?

HTML:

<div id="flex"><标签>123</标签><input type="text" value="some text"/>

CSS:

#outer { display: flex;}#柔性 {显示:弹性；边框:1px纯绿色；轮廓:1px纯红色；}标签 { flex: 0 0 80px;}

解决方案

修复:

input { min-width: 1px;}

对于垂直方向 - min-height;

After last firefox-update some of css3-code has been broken... Example (jsfiddle).

• In chromium:
• In firefox 34:

Is it bug? Or normal working? What do i need to change to fix it? Why #flex don't resize properly?

HTML:

<div id="outer">
    <div id="flex">
        <label>123</label>
        <input type="text" value="some text" />
    </div>
</div>  

CSS:

#outer { display: flex; }

#flex {
    display: flex;
    border: 1px solid green;
    outline: 1px solid red;
}

label { flex: 0 0 80px; }

解决方案

Fix:

input { min-width: 1px; }

For vertical direction - min-height;

这篇关于火狐、Flexbox 和溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！