diff --git a/lib/components/src/bar/bar.js b/lib/components/src/bar/bar.js
index 1d462dff7b34..24b1d98d3e54 100644
--- a/lib/components/src/bar/bar.js
+++ b/lib/components/src/bar/bar.js
@@ -31,11 +31,12 @@ const Side = styled.div(
 );
 Side.displayName = 'Side';
 
-export const Bar = styled.div(
+export const Bar = styled(props => <ScrollArea horizontal {...props} />)(
   ({ theme }) => ({
     color: theme.barTextColor,
     width: '100%',
     height: 40,
+    flexShrink: 0,
   }),
 
   ({ theme, border }) =>
@@ -53,6 +54,7 @@ const BarInner = styled.div({
   justifyContent: 'space-between',
   position: 'relative',
   flexWrap: 'nowrap',
+  flexShrink: 0,
   height: 40,
 });
 
@@ -60,12 +62,10 @@ export const FlexBar = ({ children, ...rest }) => {
   const [left, right] = Children.toArray(children);
   return (
     <Bar {...rest}>
-      <ScrollArea horizontal>
-        <BarInner>
-          <Side left>{left}</Side>
-          {right ? <Side right>{right}</Side> : null}
-        </BarInner>
-      </ScrollArea>
+      <BarInner>
+        <Side left>{left}</Side>
+        {right ? <Side right>{right}</Side> : null}
+      </BarInner>
     </Bar>
   );
 };