diff --git a/src/components/structures/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.js
index f14d99f730..05ad4f7561 100644
--- a/src/components/structures/IndicatorScrollbar.js
+++ b/src/components/structures/IndicatorScrollbar.js
@@ -66,6 +66,22 @@ export default class IndicatorScrollbar extends React.Component {
         this._autoHideScrollbar = autoHideScrollbar;
     }
 
+
+    componentDidUpdate(prevProps) {
+        const prevLen = prevProps && prevProps.children && prevProps.children.length || 0;
+        const curLen = this.props.children && this.props.children.length || 0;
+        // check overflow only if amount of children changes.
+        // if we don't guard here, we end up with an infinite
+        // render > componentDidUpdate > checkOverflow > setState > render loop
+        if (prevLen !== curLen) {
+            this.checkOverflow();
+        }
+    }
+
+    componentDidMount() {
+        this.checkOverflow();
+    }
+
     checkOverflow() {
         const hasTopOverflow = this._scrollElement.scrollTop > 0;
         const hasBottomOverflow = this._scrollElement.scrollHeight >
@@ -95,10 +111,6 @@ export default class IndicatorScrollbar extends React.Component {
             this._scrollElement.classList.remove("mx_IndicatorScrollbar_rightOverflow");
         }
 
-        if (this._autoHideScrollbar) {
-            this._autoHideScrollbar.checkOverflow();
-        }
-
         if (this.props.trackHorizontalOverflow) {
             this.setState({
                 // Offset from absolute position of the container