title: Making full screen section that can grow with content
body: <p>I want to make section that takes up the full screen, but that can also grow further when the content requires it</p>
  
  <p>I am using the <code>min-height</code> property but it does not seems to work: it is indeed taking the full height space, but it won't grow even if the content overflows. Unfortunately I won't be able to use flexbox for this since the size need to be set for each element (So I can't rely on it to center my element I think). </p>
  
  <p>html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;section id="MusicStyle"&gt;
      &lt;div class="parchment parchment-style"&gt;
          &lt;h1&gt;Music style&lt;/h1&gt;
          &lt;ul&gt;
              &lt;li&gt;Style 1&lt;/li&gt;
              &lt;li&gt;Style 2&lt;/li&gt;
              &lt;li&gt;Style 3&lt;/li&gt;
              &lt;li&gt;Style 4&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="parchment parchment-hardware"&gt;
          &lt;h1&gt;Hardware&lt;/h1&gt;
          &lt;p&gt;I am using the Hercules something pro &lt;/p&gt;
          &lt;p&gt;I need a jack audio input to connect to your sound system. Tests can be done for free to check if I can work with your setup.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="parchment parchment-pictures"&gt;
          &lt;h1&gt;Previous parties&lt;/h1&gt;
          &lt;div class="parties"&gt;
              &lt;img src="https://images.unsplash.com/photo-1508854806753-7878ec6a6632?w=500&amp;q=90" width="500"/&gt;
              &lt;img src="https://images.unsplash.com/photo-1543320777-d4102f7e1aa3?w=500&amp;q=90" width="500"/&gt;
              &lt;img src="https://images.unsplash.com/photo-1524368535928-5b5e00ddc76b?w=500&amp;q=90" width="500"/&gt;
              &lt;img src="https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=500&amp;q=90" width="500"/&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/section&gt;
  </code></pre>
  
  <p>Scss:</p>
  
  <pre><code>#MusicStyle {
      min-height           : auto !important;
      background           : black;
      text-align           : center;
  
      .parchment {
          display: block;
          width: 25%;
          margin: 2em auto 2em auto;
          padding: 1em 2em 1em 2em;
          /** Setting bg and color stuff **/
      }
  
      /**
       * Doing the responsiveness by hands bother me since it was pretty auto with flexbox
       **/
      .parchment-style {
          width: 383px !important;
  
          @media (max-width: 1500px) {
              width: 25% !important;
          }
  
          @media (max-width: 1200px) {
              width: 30% !important;
          }
  
          @media (max-width: 900px) {
              width: 40% !important;
          }
  
          @media (max-width: 550px) {
              width: 60% !important;
          }
      }
  
      .parchment-hardware {
          width: 383px !important;
  
          p {
              margin-top: 1em;
              &amp;:first-of-type {
                  margin-top: 0;
              }
          }
  
          @media (max-width: 1500px) {
              width: 35% !important;
          }
  
          @media (max-width: 830px) {
              width: 40% !important;
          }
  
          @media (max-width: 650px) {
              width: 65% !important;
          }
      }
  
      .parchment-pictures {
          width: 50% !important;
  
          @media (max-width: 1200px){
              width: 70% !important;           
          }
  
          @media (max-width: 830px){
              width: 90% !important;           
          }
  
          .prestations {
              margin-bottom: 2em;
          }
      }
  
      div {
          h1 {
              font-size: 4em;
          }
  
          ul {
              padding   : 0;
              margin: 2em 0 2em 0;
              list-style: none;
  
              li  {
                  padding: 0;
                  margin : 0;
              }
          }
      }
  }
  </code></pre>
  
  <p>The <code>parties</code> div is a slideshow made with the Slick library so no need to have all pictures shown at once.</p>
  
  <p>This code seems to work-ish on Firefox, but on Chrome the picture slideshow overflows on my next section and the current one still takes one view height. I haven't even tries with IE/Edge yet...</p>
  
  <p>To mention that, this code is really ugly and I'd like to do it correctly.</p>