How to dynamically change content in UI5 view

Dear UI5 experts,

Recently we encountered a challenge and I would like to seek some suggestions on this forum. Here is the story:

We have a three-layer view:

<View>

     <ScrollContainer>

          <MatrixLayout>

          </MatrixLayout>

     </ScrollContainer>

</View>

Content in <MatrixLayout> is dynamically created and everything works well.

At some point of time we can determine that the content does not exceed the screen area and there is no need for vertical scrolling, thus we want to remove the <ScrollContainer> element in order to reduce generated HTML assets. The code is like this:

this.scrollContainer = ... // Get scroll container object. This works fine

this.matrixLayout = ... // Get the matrix layout object. This works fine

if(!scrollContainer.getVertical()) {  // No need for scrolling, therefore we want to remove scrollContainer

     var view = this.controller.getView();     // Get the current view. This works fine

     view.removeContent(this.scrollContainer); // Remove scroll container

     view.addContent(this.matrixLayout);     // Add matrix layout so it's directly under the view

}

The problem is that, even the code runs without problem and all the objects look right when debugging, it results in empty screen and it seems that nothing is really added. We tried to invoke view.invalidate() to force rerendering but it does not make any difference either.

So the question is: what is the proper way of dynamically adding and removing content of a view?

Many thanks in advance,

Jay