css align main section and sidepanel full height without overflow

Question

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 overflow:hidden property.

Here is my 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;
}

<div>


  <div class="header">
    <header>
      <h1 class="">
        Urban Map
      </h1>
    </header>
  </div>

  <div class="container">
    <div class="mainsection">
     <P>
 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?
</P>
    </div>
    <div class="sidepanel">
      <div >
  <P>
   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!
  </P>
<P>
 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!

  </P>

</div>
    </div>




  </div>
</div>

I need to give map section and sidepanel with full height without overflow.

hope this help https://stackoverflow.com/questions/24461067/how-can-i-make-div-100-height-of-browser-without-vertical-scrolling-of-header — Umair Mubeen, Jul 11 '20 at 15:45
okay , but that example uses float , i want to use flexbox ,and it also contains overflow in y axis , i just want to fit contents inside main and sidepanel . can allow overflow inside panels but not for whole page , thanks anyway — AhammadaliPK, Jul 11 '20 at 15:49

score 1 · Accepted Answer · answered Jul 11 '20 at 15:57

Use flex on the primary container to set the heights of the children.

Don't set height: 100vh on .mainsection and .sidepanel, as that doesn't account for the header, which results in an overflow.

#primary-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.container {
  flex: 1 0 80vh;
  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; */
}


/* ?? */
.wrapper {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

<div id="primary-container">
  <div class="header">
    <header>
      <h1 class="">
        Urban Map
      </h1>
    </header>
  </div>
  <div class="container">
    <div class="mainsection">
      <P>
        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?
      </P>
    </div>
    <div class="sidepanel">
      <div>
        <P>
          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!
        </P>
        <P>
          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!
        </P>
      </div>
    </div>
  </div>
</div>

perfect , thanks! . May i know what exaclty `flex: 1 0 80vh;` does ? — AhammadaliPK, Jul 11 '20 at 16:04
It represents `flex-grow: 1, flex-shrink: 0, flex-basis: 80vh`. So, in `flex-direction: column`, the item will have an initial height of 80vh. Then `flex-grow` will consume any free space. — Michael Benjamin, Jul 11 '20 at 16:26
You can also try `flex: 0 0 80vh` and apply `flex-grow: 1` to the header. — Michael Benjamin, Jul 11 '20 at 16:27

css align main section and sidepanel full height without overflow

1 Answers1