sacrifice dead goats to make gemini-scrollbars work on firefox 42 and chrome 48 and later. the problem is that flexbox interacts badly with gemini-scrollbars, as gemini looks at the offsetWidth of the container in order to make the width of its enclosed scrollable view = width+scrollbarwidth. The problem is that flexbox then sees that the scrollable view has expanded, and unhelpfully flexes the container to fit it. This fixes the problem by providing more explicit widths for the containers to stop them flexing. I'm not sure I want to know why we don't also see the same problem with heights.

ara4n · ara4n · commit caa2fd97d1ea · 2015-11-13T00:46:50.000Z
diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css
@@ -107,12 +107,14 @@ limitations under the License.
 
     width: 100%;
 
+    /* specify width and margin in here rather than the wrapper otherwise gemini-scrollbars gets confused */
+    max-width: 960px;
+    margin: auto;
+
     overflow-y: auto;
 }
 
 .mx_RoomView_messageListWrapper {
-    max-width: 960px;
-    margin: auto;
 }
 
 .mx_RoomView_MessageList {
diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css
@@ -71,8 +71,14 @@ limitations under the License.
 
     background-color: #eaf5f0;
 
+/*
+    We can't use flex here as gemini-scrollbars chokes on the width calculation (on FF 42 and Chrome 48)
+    and you end up with double-scrollbars and an ever-increasing width.
+
     -webkit-flex: 0 0 210px;
     flex: 0 0 210px;
+*/
+    width: 210px;
 }
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {
@@ -117,8 +123,12 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
+/*  Similarly, specify width explicitly otherwise gemini-scrollbars gets confused
+
     -webkit-flex: 0 0 235px;
     flex: 0 0 235px;
+*/
+    width: 235px;
 }
 
 .mx_MatrixChat .mx_RightPanel.collapsed {

Original file line number	Diff line number	Diff line change
`@@ -107,12 +107,14 @@ limitations under the License.`
`107`	`107`
`108`	`108`	`width: 100%;`
`109`	`109`
	`110`	`+ /* specify width and margin in here rather than the wrapper otherwise gemini-scrollbars gets confused */`
	`111`	`+ max-width: 960px;`
	`112`	`+ margin: auto;`
	`113`	`+`
`110`	`114`	`overflow-y: auto;`
`111`	`115`	`}`
`112`	`116`
`113`	`117`	`.mx_RoomView_messageListWrapper {`
`114`		`- max-width: 960px;`
`115`		`- margin: auto;`
`116`	`118`	`}`
`117`	`119`
`118`	`120`	`.mx_RoomView_MessageList {`