Flex item which is also a flex container

If you open this fiddle in ios safari, the footer will not be pushed down by the contents.

HTML

<html>
<head></head>
<body>

  <div class="maincontents">
  

      Main contents1 <br />
      Main contents2 <br />
      Main contents3 <br />
      Main contents4 <br />
      Main contents5 <br /> 
      Main contents6 <br />
      Main contents7 <br />
      Main contents8 <br />
      Main contents9 <br />
      Main contents10 <br />
      Main contents11 <br />
      Main contents12 <br />


</div>
  
  <div class="footer">
    Footer1 <br />
    Footer2 <br />
    Footer3 <br />
    Footer4 <br />
    Footer5 <br />
    Footer6 <br />
    Footer7 <br />
  </div>
  
</body>
</html>

CSS

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.maincontents {
  flex: 1;
  display: flex; /* if you remove this line it works on Safari */
}

.footer {
  flex: 0;
  background-color: green;
}