How to vertically align and stretch content using CSS flexbox

HTML

<div class='outer'>
    <div class='inner'>A</div>
    <div class='inner'>B</div>
    <div class='inner'>C</div>
</div>

CSS

.outer {
    align-items: stretch;
    display: flex;
}

.inner {
    align-items: center;
    display: flex;
}

  .item-wrapper
    display: flex
    align-items: stretch
    justify-content: center

  .item
    width: 400px
    display: flex

Tags:

Css

Flexbox

Related