Question

Simplified to barebones示例：Chrome（40.0.2214.115 m）意外收缩并包装了包含内部div的Flexbox项目＆＃34; A bat＆＃34;文本。 FF（36.0.1）尊重填充百分比，正如我所期望的那样。为什么呢？

http://jsfiddle.net/4q04jc2p/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test HTML</title>

<style>
body {
    display:flex;
}

#test {
    background: gray;
    padding: 0% 40%;
}
</style>

</head>

<body>

<div><div id="test">A bat</div></div>
<div>A ball</div>

</body>
</html>

在我的阅读中，只有flex容器的 direct 子元素是一个flex项，但我仍然认为flex项应该根据自己的子项正确调整大小＆＃39的内容。谢谢你的帮助。

额外信息：我无法为中等复杂的页面找到有限的html + css最佳练习技巧，但我希望flexbox是允许我永远不会使用float或inline的圣杯-块。我理解即将到来的模板布局（又名CSS网格布局模块）比整体页面布局的flexbox（http://www.xanthir.com/blog/b4580）更好，所以我计划组合bootstrap css库（用于整体页面布局）使用flexbox，用于需要良好行/列布局/居中的各个组件。

然后，在上面，我尝试使用百分比而不是像素来获得流动性......并且将添加媒体大小查询（最好是基于em而不是基于像素）以便响应。但是，这种具有百分比宽度的意外弹性框行为并不乐观。非常感谢一般或具体的指导。

再次感谢。

Chrome flexbox填充百分比的宽度不正确

0 个答案: