0

I am trying to do the follwing design:

im having the problem using the minmax() in css. what i understood is that the div's are ignoring the min value and stretching themself to fit the height of the parent div. im not sure what causing this problem. i tried a lot to fix it but nothing worked.

what i am expecting is that all div's to be 75px height at beginning. after that they should go bigger when they got filled. otherweis they have to be 75px

NOTE: the #content div is a part of another grid-layout div. but since it not important for the question i didn't mention that

body{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 75px minmax(calc(100vh - 150px), auto) 75px;
    grid-template-areas:  "header"
                          "cont"
                          "footer";
}

#content{
    grid-area: cont;
    width: 80%;
    margin: 70px auto;

    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: repeat(3, minmax(70px, auto));
    grid-template-areas:  "header header"
                          "body panel"
                          "verlauf verlauf";
    grid-gap: 2em;
}

#auftrag_header{
    grid-area: header;
    background-color: red;
}

#auftrag_body{
    grid-area: body;
    background-color: green;
}

#auftrag_panel{
    grid-area: panel;
    background-color: blue;
}
#auftrag_verlauf{
    grid-area: verlauf;
    background-color: black;

}
<div id="header"></div>
<div id="content">
  <div id="auftrag_header">

  </div>
  <div id="auftrag_body">

  </div>
  <div id="auftrag_panel">

  </div>
  <div id="auftrag_verlauf">

  </div>
</div>
<div id="footer"></div>

UPDATE

my body{} have the following style:

body{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 75px minmax(calc(100vh - 150px), auto) 75px;
grid-template-areas:  "header"
                      "cont"
                      "footer";
}

I think because the cont which relevant to the #content have the height of the page. so it's forcing all what inside to fit the height?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
xDw.Co
  • 41
  • 5

1 Answers1

0

The Problem was that the #content is stretched to be as height as the page.

you can see that in grid-template-rows: 75px minmax(calc(100vh - 150px), auto) 75px; in the body{}.

My page conatin 3 div.: header, content, footer. inside the content i have the information. it's like the "MainContainer". However when im writing inside of it. all grid divs are going to fit their height to the #content div.

Sloution

Just add a div inside of the #content and write the code their. it's kind of a small hack. but it workes.

hope this helps whoever running into the same problem :)

xDw.Co
  • 41
  • 5