HTML & CSS Border ends not towards the end

[Growlypw]

I was learning flexbox when I fell into problems that wasn't even part of course.



1)When it isn't full screen, the border doesn't wrap around the content but when full screen, it wraps around the content.



I did

.

container{display:flex;border: 10px solid goldenrod;height: 100%;flex-direction: row;

}






2) When I set flex-direction to column, it doesn't wrap around the content in both small and full screen.

code for css



*{

    -moz-box-sizing: border-box;

     -webkit-box-sizing: border-box;

    

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    

}













.box{

    color:rgb(31, 21, 21);

    font-size:100px;

    text-align: center;

    text-shadow: 4px 4px 0 rgba(0,0,0,0,1);

    padding:10px

    

}



.box1{background:blue;}

.box2{background: rgb(112, 22, 22);}

.box3{background: rgb(172, 138, 138);}

.box4{background: rgb(27, 27, 27);}

.box5{background: rgb(34, 255, 0);}

.box6{background: rgb(8, 0, 255);}

.box7{background: rgb(0, 255, 132);}

.box8{background: rgb(187, 0, 255);}

.box9{background: rgb(0, 255, 238);}

.box10{background: rgb(251, 255, 0);}





.container{

    display:flex;

    border: 10px solid goldenrod;

    height: 100%;

    flex-direction: row;

    

}

 

[Johna]

2) When I set flex-direction to column, it doesn't wrap around the content in both small and full screen.
CSS:

code for css



*{

    -moz-box-sizing: border-box;

     -webkit-box-sizing: border-box;

   

    box-sizing: border-box;

    margin: 0;

    padding: 0;

   

}













.box{

    color:rgb(31, 21, 21);

    font-size:100px;

    text-align: center;

    text-shadow: 4px 4px 0 rgba(0,0,0,0,1);

    padding:10px

   

}



.box1{background:blue;}

.box2{background: rgb(112, 22, 22);}

.box3{background: rgb(172, 138, 138);}

.box4{background: rgb(27, 27, 27);}

.box5{background: rgb(34, 255, 0);}

.box6{background: rgb(8, 0, 255);}

.box7{background: rgb(0, 255, 132);}

.box8{background: rgb(187, 0, 255);}

.box9{background: rgb(0, 255, 238);}

.box10{background: rgb(251, 255, 0);}





.container{

    display:flex;

    border: 10px solid goldenrod;

    height: 100%;

    flex-direction: row;

   

}

In your CSS the flex-direction is row, not colomn.

 

[Growlypw]

In your CSS the flex-direction is row, not colomn.

Regardless, the border will still not wrap around the content. the content will still go outside.

 

[OldMan]

Please post your entire code. All the HTML/CSS.