1

I am testing css FLEX for a project. I use my own tags.

I create a page with many flexboxes..

Simply:

I create a container stretching to the limits of viewer window. [RED]

I create a grid container in it but this time it uses height 100%. [PASTELGREEN]

If I give a fixed dimension to grid container's max-height example : 800px; flexboxes in grid container float.

But if I change height to 100%; they do not float anymore. The keep stretching the container until no more flex item left.

HTML :

<body>
<pc-pagecontainer>
<pc-colgrid>
<pc-box></pc-box><pc-box2></pc-box2><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box2></pc-box2><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box2></pc-box2><pc-box></pc-box><pc-box>
</pc-box><pc-box></pc-box><pc-box></pc-box><pc-box></pc-box>
<pc-box></pc-box><pc-box></pc-box><pc-box2></pc-box2>
</pc-colgrid>
</pc-pagecontainer>
</body>

Here is CSS

pc-pagecontainer {  
display:flex;display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start;align-items:flex-start;
flex-direction:row;-webkit-flex-wrap: wrap;flex-wrap: wrap;
padding=0;
justify-content:center;webkit-justify-content: center;
min-height:100vh;
min-width=100vw;
background-color:#F00;

}


pc-colgrid{
        display:-webkit-flex;display: flex;flex-direction:column;
       -webkit-align-items:stretch;
       align-items: stretch;
       -webkit-justify-content:stretch ;
       justify-content:stretch ; 
       -webkit-flex-wrap:wrap;flex-wrap:wrap;
       -webkit-align-content:  center;align-content: center;
        padding=0;background-color:#396;max-height:100vh;width:100%;
        }



pc-box {
    display:-webkit-flex;display: flex;flex: 1 1 auto;
    min-width:100px;min-height:100px; background-color:#099; 
    border:1px; border-style:solid;
    }
    pc-box2 {
    display:-webkit-flex;display: flex;flex: 1 1 auto;
    min-width:50px;min-height:100px; background-color: #F90; 
    border:1px; border-style:solid;
    }

And here is how it looks :

enter image description here

Am I struggling with a bug or just doing something wrong ? Viewer is Firefox.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
user7685914
  • 83
  • 1
  • 9

1 Answers1

2

The vh unit is relative to the viewport. So max-height: 100vh works without further guidance, because it simply refers to the height of the viewport.

The % unit is relative to the parent container. So max-height: 100% resolves to height: auto (the height of the content; like in your example), unless you define a height on the parent.

For max-height: 100% to work, add this to your code:

html, body, pc-pagecontainer {
    height: 100%;
}

More information:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Okay I read and reading that .. "I did not know can have a height and used as a reference to the child elements.. " Thank you .. – user7685914 May 11 '17 at 14:11
  • One more question to make it all clear . Viewer height is referring to the viewer window's size.... So when i tell container 100vh. Container has a reference. So grid container as well.. Unless I change viewer window's size... Does not that count as a reference.. ? Cause I can want body to be 2000 pixels but this container to be 100% of the browser window ... – user7685914 May 11 '17 at 14:30