UI5 - Let ScrollContainer fill the remaining height

I'm trying for a quite long time to get a ScrollContainer in UI5 (m) working. I have a Panel, which contains another Panel and a ScrollContainer. The ScrollContainer should fill the remaining height.

<Panel>
  <headerToolbar>
    <!-- A custom Toolbar -->
  </headerToolbar>
  <content>
    <VBox fitContainer="true">
      <ScrollContainer vertical="true" horizontal="false">
        <List>
          <!-- A List, which should grow -->
        </List>
      </ScrollContainer>
      <Panel>
        <!-- An Input Panel, which should not grow -->
      </Panel>
    </VBox>
  </content>
</Panel>

I've tried to set the height of the scroll container to 100%, but this results in a second scrollbar in the vbox. I've also tried to work with css and setting a grow factor, but this also has not worked.

Therefore the question: What would be the correct approach, to let the ScrollContainer fill the remaining height but not more? So that is shows his vertical scroll bar.

Solution

Is the Scrollcontainer a requirement? If not, you might succeed with different controls like FixFlex

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta charset="utf-8">

  <script id='sap-ui-bootstrap' src='https://ui5.sap.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>


  <script id="myXml" type="text/xmldata">
    <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:l="sap.ui.layout" xmlns="sap.m" controllerName="myController" displayBlock="true">
      <App>
        <l:FixFlex minFlexSize="20%" fixFirst="false">
          <l:flexContent>
            <List id="list" />
          </l:flexContent>
          <l:fixContent>
            <Panel class="sapUiResponsiveMargin">
              <headerToolbar>
                <OverflowToolbar style="Clear">
                  <Title text="Custom Toolbar with a header text" />
                </OverflowToolbar>
              </headerToolbar>
              <content>
                <Text text="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat"
                />
              </content>
            </Panel>
          </l:fixContent>
        </l:FixFlex>
      </App>
    </mvc:View>
  </script>

  <script>
    sap.ui.controller("myController", {
      onInit: function() {
        var data = {
          names: [{
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Peter",
              lastName: "Mueller"
            },
            {
              firstName: "Petra",
              lastName: "Maier"
            },
            {
              firstName: "Thomas",
              lastName: "Smith"
            },
            {
              firstName: "John",
              lastName: "Williams"
            },
            {
              firstName: "Maria",
              lastName: "Jones"
            }
          ]
        };

        var model = new sap.ui.model.json.JSONModel();
        model.setData(data);
        this.getView().setModel(model);

        var list = this.getView().byId("list");
        list.bindItems({
          path: "/names",
          template: new sap.m.StandardListItem({
            title: "{lastName}",
            description: "{firstName}"
          })
        });
        list.setModel(model);
      }
    });
    sap.ui.xmlview({
      viewContent: jQuery('#myXml').html()
    }).placeAt("content");
  </script>
</head>

<body id='content' class='sapUiBody'>
</body>

</html>