Firefox的flex不会增加滚动条 [英] firefox flex doesn't grow for scrollbar

问题描述

如果你有

pre> flex：0 0 auto;
溢出：auto;


当y方向溢出时，它占了滚动条的额外宽度，一切正常。但在Firefox中，它不占用额外的宽度，并使内容在x方向上溢出。

我准备了一支笔来证明这个问题：

任何建议/变通方法都会很棒！

编辑：flex-grow：1（1 1 auto）问题，这使得容器通过增长来响应周围的额外空间。如果你不希望这个元素增长，只能和内容一样宽？

解决方案

请使用 flex：1 1 auto 而不是 0 0 auto ，因为它根据它的宽度/ height 属性，但它使得它非常灵活，因此它们可以吸收主轴上的任何额外空间。定义如下：

  .child {
 flex：1 1 auto; 
 width：50px; 
 height：50px; 
背景：＃000; 
颜色：#fff; 
 margin：8px; 
 text-align：center; 
 line-height：50px; 
 border：3px solid＃4d4d50; 
 border-radius：2px; 
} 
  

I am having trouble with an issue specific to firefox (afaik).

In chrome if you have

flex: 0 0 auto;
overflow: auto;

when there is overflow in y direction, it accounts for the extra width of the scrollbar and everything is fine. But in firefox it doesn't account for the extra width and it makes the content to overflow in the x direction as well.

I have prepared a pen that demonstrates this issue:

https://codepen.io/anon/pen/JEMyPm

firefox:

chrome:

Any suggestion/workarounds would be awesome!

EDIT: flex-grow: 1 (1 1 auto) can fix the problem, that makes the container to respond to the extra space around it by growing. What if you don't want the element to grow and only be as wide as the content inside?

解决方案

Please use flex: 1 1 auto instead of 0 0 auto, as It sizes the item based on its width/height properties, but makes it fully flexible so that they absorb any extra space along the main axis. defined below:

.child {  
   flex: 1 1 auto;  
   width: 50px;  
   height: 50px;
   background: #000;
   color: #fff;  
   margin: 8px;  
   text-align: center;  
   line-height: 50px;  
   border: 3px solid #4d4d50;   
   border-radius: 2px; 
}

这篇关于Firefox的flex不会增加滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！