Почему не контент не двигает футер?

315

21 декабря 2016, 03:05

При добавлении в дочерний блок "left_top" блока "main" текста, сама текст выходит за футер, а должен двигать его. почему иак происходит?

* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  height: 100%; 
} 
 
#wrapper { 
  height: 100%; 
  width: 960px; 
  margin: 0 auto; 
  background: #bfbfbf; 
  display: flex; 
  flex-direction: column; 
} 
 
header { 
  flex: 0 0 100px; 
  background: #7df799; 
  border-bottom: 1px solid #000000; 
} 
 
main { 
  display: flex; 
  flex: 1 1; 
  flex-direction: row; 
} 
 
#left { 
  background: #bcaff4; 
  flex: 0 0 250px; 
  border-right: 1px solid #000000; 
} 
 
#left_top { 
   
} 
 
#left_bottom { 
   
} 
 
#content{ 
  flex: 1 1; 
} 
 
footer { 
  flex: 0 0 200px; 
  border-top: 1px dashed #000000; 
  background: #7df799; 
}

 <html> 
  <head> 
    <meta charset="utf-8"> 
    <title>TESTIK</title> 
    <link rel="stylesheet" href="css/style.css"> 
  </head> 
  <body> 
    <div id="wrapper"> 
      <header>header</header> 
      <main class="clearfix"> 
        <div id="left"> 
          <div id="left_top">left_top</div> 
          <div id="left_bottom">left_bottom</div> 
        </div> 
        <div id="content">content</div> 
      </main> 
      <footer>footer</footer> 
    </div> 
  </body> 
</html>