Can you make flexbox background height the same? - html

Question

I am using flexbox display and it is working fine. Except when I happen to use a background color on one of the divs, the color does not cover the entire height of the div. It ends up looking like this --
Of course what I'd like is for the background color to extend to the same height as the div to the right. Is this even possible with flexbox?
.row {
display: flex;
align-items: center;
}
.left {
flex: 1 0 auto;
background-color: wheat;
}
.right {
flex: 1 0 auto;
}
<div class="row">
<div class="left">Some text</div>
<div class="right">
<input type="text" style="height:40px" />
</div>
</div>

Answer 1

The problem is that you use
align-items: center;
The default value does what you want:
align-items: stretch;
.row {
display: flex;
}
.left {
flex: 1 0 auto;
background-color: wheat;
}
.right {
flex: 1 0 auto;
}
<div class="row">
<div class="left">
Some text
</div>
<div class="right">
<input type="text" style="height:40px" />
</div>
</div>
But then you will need to center the contents vertically. You can do it with more flexbox. Some examples:
Row layout and align-items:
.left {
display: flex; /* More flexbox */
align-items: center; /* Center in the cross (vertical) axis */
}
.row {
display: flex;
}
.left {
flex: 1 0 auto;
background-color: wheat;
display: flex;
align-items: center;
}
.right {
flex: 1 0 auto;
}
<div class="row">
<div class="left">
Some text
</div>
<div class="right">
<input type="text" style="height:40px" />
</div>
</div>
Column layout and justify-content:
.left {
display: flex; /* More flexbox */
flex-direction: column; /* Column layout */
justify-content: center; /* Center in the main (vertical) axis */
}
.row {
display: flex;
}
.left {
flex: 1 0 auto;
background-color: wheat;
display: flex;
flex-direction: column;
justify-content: center;
}
.right {
flex: 1 0 auto;
}
<div class="row">
<div class="left">
Some text
</div>
<div class="right">
<input type="text" style="height:40px" />
</div>
</div>
Inserting pseudo-elements with auto margins:
.left {
display: flex; /* More flexbox */
flex-direction: column; /* Column layout */
}
.left::before, .left::after {
content: ''; /* Generate pseudo-elements */
margin: auto; /* Push contents */
}
.row {
display: flex;
}
.left {
flex: 1 0 auto;
background-color: wheat;
display: flex;
flex-direction: column;
}
.left::before, .left::after {
content: '';
margin: auto;
}
.right {
flex: 1 0 auto;
}
<div class="row">
<div class="left">
Some text
</div>
<div class="right">
<input type="text" style="height:40px" />
</div>
</div>