CODEWITHSUNDEEP
htmlcssflexbox
Craig
Craig

Reputation: 768

Can you make flexbox background height the same?

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 --

enter image description here

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>

Upvotes: 1

Views: 1886

Answers (1)

Oriol
Oriol

Reputation: 288310

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>

Upvotes: 6

Related Questions