create sizer that sets item size with flex-basis

works with the flex-grow we set initially for the sub lists

src/components/views/rooms/RoomList.js

@@ -35,7 +35,7 @@ import RoomListStore from '../../../stores/RoomListStore';
 import GroupStore from '../../../stores/GroupStore';
 
 import ResizeHandle from '../elements/ResizeHandle';
-import {Resizer, CollapseDistributor} from '../../../resizer'
+import {Resizer, FixedDistributor, FlexSizer} from '../../../resizer'
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 

src/resizer/index.js

@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Sizer} from "./sizer";
+import {Sizer, FlexSizer} from "./sizer";
 import {FixedDistributor, CollapseDistributor, PercentageDistributor} from "./distributors";
 import {Resizer} from "./resizer";
 
 module.exports = {
     Resizer,
     Sizer,
+    FlexSizer,
     FixedDistributor,
     CollapseDistributor,
     PercentageDistributor,

src/resizer/sizer.js

@@ -97,4 +97,11 @@ class Sizer {
     }
 }
 
-module.exports = {Sizer};
+class FlexSizer extends Sizer {
+    setItemSize(item, size) {
+        item.style.flexGrow = '0';
+        item.style.flexBasis = `${Math.round(size)}px`;
+    }
+}
+
+module.exports = {Sizer, FlexSizer};