How do you center a child div with a specified height vertically in a parent only when the parent is larger than the child? And when the parent is smaller than the child, the child div lines up to the top of the parent so that the top of the child is not cut off.
I want the blue child to center vertically like it does here (code pen):
Good:
<div class='red-parent' style =
"border: 2px solid red;
overflow:hidden;
margin-top:90px;
height: 100px;
overflow: hide;
">
<div class="blue-child" style =
"border: 2px solid blue;
color: blue;
margin: 0 20px;
height: 116px;
top: 50%;
transform: translateY(-50%);
position: relative;
"> inner div </div>
</div>
However when the parent is smaller than the child I want the child to be flush against the top of the parent like this:
What I want:
And not centered and cut off like this:
How it is now:
How do I make this happen?
I tried flex but I couldn't get it right. Is the only way to do this media queries?
