CODEWITHSUNDEEP
htmlcss
Sonny49
Sonny49

Reputation: 555

How to fill left class div with color?

I need .left class to have been fully filled with red colour if the right class has content in it. At the moment it doesn't fully fill in the color to the left div? I believe problem is with height? How can I achieve it?

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #bebebe;
  border-radius: 5px;
}

.left {
  background-color: red;
  padding: 0 8px;
  flex-grow: 1;
  display: flex;
}

.right {
  width: 100%;
  background-color: blue;
}
<div class="container">
  <div class="left">
    <input type="radio" />
  </div>
  <div class="right">
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
  </div>
</div>

Upvotes: 0

Views: 54

Answers (1)

Kostas Minaidis
Kostas Minaidis

Reputation: 5412

Just change align-items: center; to align-items: stretch; in the .container:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; /* <-- Change this */
  align-items: stretch;
  border: 1px solid #bebebe;
  border-radius: 5px;
}

.left {
  background-color: red;
  padding: 0 8px;
  flex-grow: 1;
  display: flex;
}

.right {
  width: 100%;
  background-color: blue;
}
<div class="container">
  <div class="left">
    <input type="radio" />
  </div>
  <div class="right">
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
  </div>
</div>

Upvotes: 2

Related Questions