Divs moving out of parent div, using flexbox - html

Question

I got this flex-box problem,
i got 2 divs contained in 1 div, each one of the is a flexbox too, the Divs pop out of the parent div,
i want them to never move out the parent divs dimensions,
the divs go over the table below them at the moment,
how do i accomplish this?
Another Question: I would like to ask is, in the div named container i got a table,
i want that table to be dead center of the div, and of course never collide with the footer or header
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0
}
.main {
display: flex;
flex-direction: column;
text-align: center;
height: 100vh;
}
.header {
display: flex;
flex-direction: column;
justify-content: space-evenly;
/* flex-wrap: wrap; */
height: 20%;
}
.header h1 {
width: 100%;
}
.secondHeader {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.levels {
display: flex;
flex-direction: row;
justify-content: space-evenly;
background: green;
margin: 5px;
}
.main-Game-Body {
display: flex;
flex-direction: row-reverse;
height: 72%;
margin: 5px;
padding: 4px;
}
.container {
flex-grow: 1;
}
.footer {
height: 8%;
margin: 4px;
}
<div class="main">
<div class="header">
<h1>Welcome To Minesweeper</h1>
<div class="secondHeader">
<button class="hints" onclick="activateHintMode()">
You Have: <span></span> Hints Left
</button>
<button class="safe" onclick="safeClick()">
You Have: <span></span> safe clicks Left
</button>
<button class="lives">You Have: <span></span> Lives Left</button>
<button class="backUp" onclick="stepBack()">stepBack</button>
</div>
<div class="levels">
<button class="manual" onclick="manualMode()">
Manual Mode
</button>
<button class="level" onclick="easyMode()">Easy Mode</button>
<button class="level" onclick="hardMode()">Hard Mode</button>
<button class="level" onclick="expertMode()">EXPERT</button>
</div>
</div>
<div class="main-Game-Body">
<!-- <button class="icon" onclick="restartLevel()"></button> -->
<div class="container"></div>
</div>
<div class="footer">
<div class="timer" onclick="timer()">
Your Score: <span class="stopwatch"></span> Best Score At Difficulty
<span class="difficulty"></span> is: <span class="results"></span>
</div>
</div>
</div>

Answer 1

This is not the issue with levels div. You have given static height to each div that's why the content is trying to fit in that height. When you try to increase the margin the element treis to reside inside the container height resulting in moving the items above levels div outside the container.
Solution: Remove static height for header, main-Game-Body and footer, use flex-grow: 1 for main-Game-Body this will help fitting the content in remaining height.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0
}
.main {
display: flex;
flex-direction: column;
text-align: center;
height: 100vh;
}
.header {
display: flex;
flex-direction: column;
justify-content: space-evenly;
/* height: 20%; */
}
.header h1{
width: 100%;
}
.secondHeader {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.levels {
display: flex;
flex-direction: row;
justify-content: space-evenly;
background: green;
margin: 5px;
}
.main-Game-Body {
display: flex;
flex-direction: row-reverse;
/* height: 72%; : Do not give height, use flex grow*/
flex-grow: 1;
margin: 5px;
padding: 4px;
}
.container {
flex-grow: 1;
}
.footer {
/* height: 8%; */
margin: 4px;
}
<div class="main">
<div class="header">
<h1>Welcome To Minesweeper</h1>
<div class="secondHeader">
<button class="hints" onclick="activateHintMode()">
You Have: <span></span> Hints Left
</button>
<button class="safe" onclick="safeClick()">
You Have: <span></span> safe clicks Left
</button>
<button class="lives">You Have: <span></span> Lives Left</button>
<button class="backUp" onclick="stepBack()">stepBack</button>
</div>
<div class="levels">
<button class="manual" onclick="manualMode()">
Manual Mode
</button>
<button class="level" onclick="easyMode()">Easy Mode</button>
<button class="level" onclick="hardMode()">Hard Mode</button>
<button class="level" onclick="expertMode()">EXPERT</button>
</div>
</div>
<div class="main-Game-Body">
<!-- <button class="icon" onclick="restartLevel()"></button> -->
<div class="container"></div>
</div>
<div class="footer">
<div class="timer" onclick="timer()">
Your Score: <span class="stopwatch"></span> Best Score At Difficulty
<span class="difficulty"></span> is: <span class="results"></span>
</div>
</div>
</div>