What could cause a space between flex container rows?

Question

What could cause a space between flex container rows?

I have removed the link to dev project, because the answer is self-explanatory, one of items on the first row had set very high height.

There is a large gap between

*) the upper row containing div.hlang, div.headerstamp.stampcont, div.pckHeader, svg#coatArmCyprus

*) and the lower row, containing three div.pck (long columns) with different contents.

What could cause the gap? Because i align all these items in body.cont, which is flex container with flex-direction: row; justify-content: flex-start; align-content: flex-start; align-items: flex-start;

All these items are wrapped in body.cont

   body.cont {
        box-sizing: border-box; 
        width: 100%; 
        position : relative; //normally nody is static
        display: flex; /* container */
        flex-direction: row;
        flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
        justify-content: flex-start; /* main axia : flex-start | flex-end | center | space-between | space-around | space-evenly; */
        align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
        align-content: flex-start; /* all c
                                   ontainer lines : flex-start | flex-end | center | space-between | space-around | stretch; */
        margin:0; border:0; padding: 0 $bodyPadR 0 $bodyPadL; 
    }



.pck {
    box-sizing: border-box; 
    display: flex; /* container */
    flex-direction: column;
    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse; */
    justify-content: space-around; /* flex-start | flex-end | center | space-between | space-around | space-evenly; */
    align-items: flex-start; /* cross axis: flex-start | flex-end | center | baseline | stretch; */
    align-content: flex-start; /* all container lines : flex-start | flex-end | center | space-between | space-around | stretch; */
    border:0; margin:0; padding:0;
    width:$colw; 
}

Answer 1

Remove the height: 30vw; from the div.hlang rule

---

As a tip, if you right click on your page and then choose "Inspect", you can then hover the html and see how each item renders in the page.