Vertically center item with flexbox - align-items: center doesn't work? - html

Question

I used the styling from this thread to make a progress bar fill in the empty space in a div (only other item is a button).
The problem is now that align-items: center doesn't vertically center the progress bar. I tried using align-content: center on the child too, with no effect.
Here's the code in case you didn't open the link
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}
Markup:
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
Can someone tell me what I'm doing wrong? Thanks in advance
This is how it looks:

Answer 1

I guess you can do the following to get it right:
There is a margin coming for the .progress element- first you can nullify it:
.wrapper > .left > .progress {
margin: 0;
}
Give 100% height for wrapper
I also removed height: 10vh for the container of wrapper to finish things up.
See revised fiddle here and snippet below:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.wrapper {
display: flex;
align-items: center;
width: 100%;
background: #ccc;
height: 100%;
}
.wrapper > .left {
background: #fcc;
flex: 1;
}
.wrapper > .right {
background: #ccf;
}
.wrapper > .left > .progress {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%">
</div>
</div>
</div>
<div class="right">
<button type="button" aside-menu-toggle="menu-1" class="btn btn-sm btn-default">Меню</button>
</div>
</div>
</div>
</div>
</div>
Let me know your feedback on this. Thanks!

Answer 2

A flex container will enable a flex context only to its direct children. Hence, your "progress-bar" div is out of reach. Likewise, your purple background bar is before flex container (wrapper), so don't expect it's content to be centered either. You can check this guide.
Check this code:
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; height:10vh; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
</div>
</div>
Pen based on your code here

Answer 3

Try adding
align-items: center;
justify-content: center;
to your .wrapper class.
Here is a good article on FlexBox positioning:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/