title: css align main section and sidepanel full height without overflow
body: <p>In my page I have a header, main area (map) and right side panel. I need main area 80% and sidepanel 20% with display flex , but cant restrict the overflow. Don't want to give <code>overflow:hidden</code> property.</p>
  <p><a href="https://i.stack.imgur.com/cnWNB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cnWNB.png" alt="enter image description here" /></a></p>
  <p>Here is my code,</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  
  .wrapper{
      width: 100%;
      height: 100%;
  }
  
  .container{
      display: flex;    
  }
  
  .header{
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: gray;
      color: #FFF;
  }
  
  .mainsection{
      background-color: #ddd;
      width: 80%;
      height: 100vh;
  }
  
  .sidepanel{
      background-color: #eee;
      width:20%;
      height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
  
  
    &lt;div class="header"&gt;
      &lt;header&gt;
        &lt;h1 class=""&gt;
          Urban Map
        &lt;/h1&gt;
      &lt;/header&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="mainsection"&gt;
       &lt;P&gt;
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, natus. Excepturi, quasi perferendis? Eum impedit unde, vel tempore recusandae accusantium, quibusdam quo et, iure maxime nulla cumque est in cupiditate?
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi accusamus, quasi omnis eaque delectus repudiandae deleniti commodi debitis earum pariatur esse recusandae vitae cumque a, impedit maiores vero. Quibusdam, at?
  &lt;/P&gt;
      &lt;/div&gt;
      &lt;div class="sidepanel"&gt;
        &lt;div &gt;
    &lt;P&gt;
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quibusdam necessitatibus inventore, molestias voluptates facilis quod eius optio dignissimos culpa, reprehenderit quas, impedit reiciendis facere ipsam ab nemo expedita tempore!
    &lt;/P&gt;
  &lt;P&gt;
   Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe deserunt nulla modi aliquam iure perspiciatis at perferendis itaque temporibus, quod fugiat, id facilis similique minus. Dignissimos cumque deserunt aspernatur nostrum!
  
    &lt;/P&gt;
  
  &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I need to give map section and sidepanel with full height without overflow.</p>