Content overflows from 100% height DIV - html

Question

I want to make a div which:
Stretches to 100% width and height of browser window,
Makes all content inside centered vertically and horizontally,
Has min-height = all content + 10% of top&bottom padding.
I've made some code:
html {
height: 100%;
}
body {
height: 100%;
}
.blah {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: center;
text-align: center;
padding: 10% 0 10% 0;
background: #ffb3b3;
}
<div class="blah">
<p>Here goes some content</p>
</div>
The same on jsfiddle
As you can see, it works fine, except point 3 - when scaling down, the content overflows the div around it:
screen
I've tried to set for .blah:
height: auto;
min-height: 100% !important;
position: relative;
but then it doesn't work on bigger resolutions - div is bigger than the browser height.
This solution doesn't work.
I will be extremely grateful for any ideas.

Answer 1

you just need to use box-sizing:border-box
html,
body {
height: 100%;
margin: 0
}
.blah {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background: #ffb3b3;
min-height: 100%;
padding: 10% 0;
box-sizing: border-box;
}
<div class="blah">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus rhoncus erat sit amet ullamcorper. Cras quis vulputate ex, ut sollicitudin massa. Vivamus vitae ipsum posuere, eleifend quam quis, pulvinar tellus. Cras semper, lectus sit amet molestie
</div>