Flexbox在另一个flexbox里面？

我正在尝试让flexbox在flexbox中工作.虽然第一个(包装)flexbox工作,但内部的一个没有做任何事情.反正有没有让这个工作？

我要做的是有效地拥有两个粘性页脚,并且两者的高度都达到了页脚.

html, body {
  height: 100%;
  margin: 0; padding: 0;  /* to avoid scrollbars */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#header {
  background: yellow;
  height: 100px;  /* can be variable as well */
  
}

#body {
  flex: 1;
  border: 1px solid orange;
  height: 100%:
}
#wrapper2 {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;
}
#body2 {
  border: 1px solid purple;
  flex: 1;
}
#footer2 {
  background: red;
  flex: 0;
}

#footer{
  background: lime;
}

  
Bodyof

    variable

    height

    

    

    blah
    
    

    blah

    blah
    
    
    
    
  

    Footer

    of

    variable

    height