相关疑难解决方法(0)
为什么弹性项目不会缩小内容大小？
我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.
我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.
观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)
我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？
我不能用overflow-x: hidden.
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div> …推荐指数
解决办法
查看次数
如何在FF 34.x中获得FF 33.x Flexbox行为？
我们大量使用flexbox用于桌面应用程序,例如查看Web应用程序,它一直很好用.
但是使用最新的Firefox Developer Edition(35.0a2),布局的行为并不像预期的那样(它超出了视口):http://tinyurl.com/k6a8jde
这在Firefox 33.1中运行良好.
我认为这与此处描述的flexbox更改有关:https: //developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility
但遗憾的是,我还无法找到在FF 34或35.x中获得FF 33.x行为的方法.
有关布局或如何更好地隔离问题的任何帮助表示赞赏.
推荐指数
解决办法
查看次数
Firefox中Flexbox中的垂直滚动渲染问题
我想在父项中包含一个flex项,以便它不会溢出父项之外.只有弹性项目应该有一个滚动条(如果需要).
我的样式在Chrome和IE11中运行良好,但不适用于Firefox.我怀疑在flex-basis设置的样式的解释上有所不同#wrapper,但我无法弄清楚为什么Firefox以不同的方式呈现.
这是Chrome中所需的渲染:
这是Firefox中发生的事情:
我可以通过添加来应用"胶带"修复#left { height: calc(100vh - 50px); },但如果可能的话,我更愿意确定实际的不一致性.
body, html, h1 {
padding: 0;
margin: 0;
}
header {
background-color: rgba(0, 255, 255, 0.2);
height: 50px;
}
#main {
height: 100vh;
background-color: rgba(0, 255, 255, 0.1);
display: flex;
flex-flow: column;
}
#wrapper {
display: flex;
flex-grow: 2;
flex-basis: 0%;
}
#left {
overflow-y: scroll;
background-color: rgba(0, 255, 255, 0.2);
width: 30%;
}
.box {
margin: 5px 0;
height: 50px;
width: 100%; …推荐指数
解决办法
查看次数