Firefox flex doesn't grow for scrollbar

Question

I am having problems with a firefox (afaik) related issue.

In chrome, if you have

flex: 0 0 auto;
overflow: auto;

when an overflow occurs in the y direction, it takes into account the extra scrollbar width, and that's all right. But in firefox, it does not account for the extra width, and it also makes the content overflow in the x direction.

I prepared a pen that demonstrates this problem:

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

Glowworm:

chromium

Any suggestion / workarounds would be great!

EDIT: flex-grow: 1 (1 1 auto) can solve the problem, causing the container to respond to the extra space around it, increasing. What if you do not want the element to grow and be only wider than inside?

Answer 1

flex: 1 1 auto 0 0 auto, width/height, , . :

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