Centering multiple items in flexbox not working as expected [duplicate] - css

Question

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to vertically content within a div with flexbox, so that it always remains centered.
However it is not working as expected. Interested to see where I'm going wrong.
Just to confirm, the 'left div' should display the contents in regular vertical order, not horizontally as is currently happening.
section {
display:flex;
}
div {
padding:12px;
width:400px;
height:300px;
display:flex;
align-items:center;
}
.left {background:#bada55}
.right {background:red}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>
Link to codepen

Answer 1

You can use flex-direction on .left to make it center vertically:
section {
display: flex;
}
div {
padding: 12px;
width: 400px;
height: 300px;
display: flex;
}
.left {
background: #bada55;
flex-direction: column;
justify-content: center;
}
.right {
background: red;
align-items: center;
}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>

Answer 2

EDIT based on your comment, I believe this works:
section {
display: flex;
align-items: center;
height: 300px;
}
div {
width: 400px;
padding: 12px;
}
div.right {
display: flex;
align-items: center;
}
<section>
<div class="left">
<h2>Very long title</h2>
<p>Caption goes here</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
</div>
</section>