diff --git a/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx b/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx
index 323cee6fb..c83072c92 100644
--- a/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx
+++ b/desktop/flipper-plugin/src/data-source/DataSourceRendererVirtual.tsx
@@ -325,7 +325,8 @@ const tableContainerStyle = {
   overflowY: 'auto',
   overflowX: 'hidden',
   display: 'flex',
-  flex: 1,
+  // because: https://stackoverflow.com/questions/37386244/what-does-flex-1-mean
+  flex: `1 1 0`,
 } as const;
 
 const tableWindowStyle = {
diff --git a/desktop/flipper-plugin/src/ui/Layout.tsx b/desktop/flipper-plugin/src/ui/Layout.tsx
index a51c1baee..33f22daf3 100644
--- a/desktop/flipper-plugin/src/ui/Layout.tsx
+++ b/desktop/flipper-plugin/src/ui/Layout.tsx
@@ -94,7 +94,7 @@ const Horizontal = styled(Container)({
 });
 
 const ScrollParent = styled.div<{axis?: ScrollAxis}>(({axis}) => ({
-  flex: 1,
+  flex: `1 1 0`,
   boxSizing: 'border-box',
   position: 'relative',
   overflowX: axis === 'y' ? 'hidden' : 'auto',
@@ -272,7 +272,7 @@ const SandySplitContainer = styled.div<{
 }>((props) => ({
   boxSizing: 'border-box',
   display: 'flex',
-  flex: 1,
+  flex: `1 1 0`,
   flexDirection: props.flexDirection,
   alignItems: props.center ? 'center' : 'stretch',
   gap: normalizeSpace(props.gap, theme.space.small),