firefox flex不会增长滚动条

Question

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?

Answer 1

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; 
}