title: Display flex doesn't work
body: <p>I'm trying to set a section with <code>display: flex</code> using CSS, but it seems I can't do it. I tried so many different combos with CSS and the result is just changing the size of my section, but the element goes outside when the section reach the max-height that I set up.</p>
  
  <p>Here is my HTML code where I want to display the element in flex mode:</p>
  
  <pre><code>&lt;section id="BattlesH" class="flex-container"&gt;
      &lt;h3&gt;&lt;a name="hiphop"&gt;HipHop&lt;/a&gt;&lt;/h3&gt;
      &lt;div id="MyApp"&gt;
          &lt;% if (req.user) { %&gt;
              &lt;input type="button" value="Show Hide DIV" v-on:click="ShowHide" /&gt;
          &lt;%}%&gt;
          &lt;div v-show = "IsVisible"&gt;
              &lt;label for="youtube"&gt;YouTube url&lt;/label&gt;
              &lt;input type="text" id="youtube" v-model="text" placeholder="Paste your YouTube video link"&gt;&lt;br&gt;
              &lt;button  v-on:click="loadVideo"&gt;Add Video&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;section id="wrapPartecipant1" class="videoYoutube" v-for="item in videos"&gt;
          &lt;section&gt;
              &lt;!-- IFRAME PER OGNI VIDEO CONTENUTO NEL DB --&gt;
              &lt;iframe class="partecipant"  v-bind:src="item.video.url"&gt; &lt;/iframe&gt;
              &lt;!-- PRELEVO DAL DB IL CONTEGGIO DEI VOTI --&gt;
              &lt;p id="voti" &gt; {{item.count}}  &lt;/p&gt;
              &lt;% if (req.user) { %&gt;
                  &lt;!-- AGGIUNGO UN VOTO --&gt;
                  &lt;input type="button" id="buttonVoti" v-on:click="addVoto(item._id)"&gt;
                  &lt;!--&lt;iframe id="partecipant1" src="https://www.youtube.com/embed/............"&gt;&lt;/iframe&gt;--&gt;
              &lt;%}%&gt;
          &lt;/section&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.flex-container{
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      align-content: flex-start;
  }
      #BattlesH{
      /*width:700px;*/
      height: auto;
      max-height: 600px;
      margin:5px;
      padding: 10px;
      /*float:right;*/
      border-radius: 10px;
      border:2px solid black;
      background:#ccffcc;
      position: relative;
      text-align: center;
      color: black;
  }
  </code></pre>
  
  <p>In some places there are comments; I used them to see if changing them can get some results, but nothing helped.</p>