相关疑难解决方法(0)

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.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> …

我们大量使用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行为的方法.

有关布局或如何更好地隔离问题的任何帮助表示赞赏.

如何防止使用滚动条的子div和flex:1超出其在Firefox中的父Flexbox的高度？它在Chrome中正常运行.

CodePen链接(如果您更喜欢Stack Overflow片段):https://codepen.io/garyapps/pen/ZMNVJg

细节:

我有一个固定高度的弹性容器.它有一个flex-direction:column设置,它包含多个垂直堆叠的孩子div.其中一个儿童div被赋予flex:1财产,而其他人则获得固定的高度.

我的期望是带有flex:1财产的子女孩将扩大以填补剩余的垂直空间.这按预期工作.

我还给了孩子div一个overflow-y:scroll属性,所以如果它内的内容超过它的高度,就会出现滚动条.这在Chrome中运行良好.然而,在Firefox中,这个孩子的身高会增加,超过其父div.

在Chrome中:

在Firefox中:

正如您在屏幕截图中看到的,我有两次出现此问题,一次出现在左侧面板中,另一次出现在右侧面板中.在Chrome中,子div的高度保持不变,出现滚动条,并且不会超出父级的高度.在Firefox中,滚动条不会出现,并且子div的高度会增加并超过其父级.

我已经在SO上查看了一些其他类似的问题,并且在很多情况下设置min-height:0属性解决了Firefox中的问题.但是我试过加入min-height:0父母,孩子,父母和孩子,没有运气.

请在Chrome和Firefox中运行下面的代码段,以查看两种浏览器的不同之处.

我很感激有关如何防止儿童成长的任何建议.

(注意正在使用Bootstrap 4.代码片段引用了bootstrap 4 .css文件CDN)

代码片段:

.body-content {
        height: 300px;   
        max-height:100%;
        border: 3px dashed purple;
        display:flex;                       
        flex-direction: column;             
    }


#messagescontainerrow {
        flex: 1;
        border: 5px double black;
    }

#leftdiv {
        display:flex;
        flex-direction:column;
        border: 1px solid green;
    }

#messagetools {
        height: 50px;
        background-color: cornsilk;
    }

#messagelist {
        flex:1;     
        overflow-y: scroll;   
        background-color:whitesmoke; …