CODEWITHSUNDEEP
htmlcssflexbox
Meek
Meek

Reputation: 3348

Flexbox equal height issue

I'm trying to create a list with items each containing text and an image. I'm using flexbox to align the text and the image.

However, I would like the height of the text element (.list-content) to define the height of the image element (.list-img), but I can't make it work.

    .advanced-list {
      list-style: none;
      width: 85%;
    }
    
    .advanced-list li {
      display: flex;
      min-height: 80px;
      background-color: #eee;
    }
    
    .advanced-list li .list-img {
      display: block;
      overflow-x: hidden;
      flex: 1 0 33%;
    }
    
    .advanced-list li .list-img img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    
    .advanced-list li .list-content {
      padding: 10px;
    }
    
    .advanced-list li .list-content .list-header {
      margin-top: 0;
    }
    
    .advanced-list li .advanced-link {
      display: flex;
      color: #252525;
      text-decoration: none;
    }
    
    .advanced-list li .advanced-link:hover {
      background-color: #e7e6e6;
    }
    
    .advanced-list li + li {
      margin-top: 5px;
    }
    <ul class="advanced-list">
      <li>
        <div class="list-content">
          <h4 class="list-header">List item without link</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat augue diam, id ornare neque mollis eu. Vivamus semper diam urna, in maximus felis sollicitudin eget. Vivamus sed mi at nunc condimentum placerat.
        </div>
        <div class="list-img">
          <img src="https://placehold.it/250x125?text=250x125" alt="Img title">
        </div>
      </li>
      <li>
        <a href="#" class="advanced-link">
          <div class="list-content">
            <h4 class="list-header">List item with link</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat augue diam, id ornare neque mollis eu. Vivamus semper diam urna, in maximus felis sollicitudin eget. Vivamus sed mi at nunc condimentum placerat. Aenean eget gravida sem.
            Vestibulum mollis eros non fermentum rhoncus.
          </div>
          <div class="list-img">
            <img src="https://placehold.it/250x125?text=250x125" alt="Img title">
          </div>
        </a>
      </li>
    </ul>

Note that sometimes there can be an <a> element wrapping the content. Also, the image should fill up 33% of the width of the list item.

See fiddle here.

Upvotes: 2

Views: 81

Answers (2)

Hardi Shah
Hardi Shah

Reputation: 343

Give height: 100% to the img tag. Hope this will help you.

See this: http://jsfiddle.net/y5pxkbn1/4

Upvotes: 1

Asons
Asons

Reputation: 87191

Since your image should be based on the height of the text and be 33% wide, combine background-image with background-size: cover.

Here I simply removed the img and added the image source to the list-img element in the markup using a inline style, though you can of course also put the image path in the external CSS.

Another option would be to use object-fit on the img, thought it has less browser support than background-image.

Updated fiddle

Stack snippet

.advanced-list {
  list-style: none;
  width: 85%;
}

.advanced-list li {
  display: flex;
  min-height: 80px;
  background-color: #eee;
}

.advanced-list li .list-img {
  flex: 1 0 33%;
  background-position: center;
  background-size: cover;
}

.advanced-list li .list-content {
  padding: 10px;
}

.advanced-list li .list-content .list-header {
  margin-top: 0;
}

.advanced-list li .advanced-link {
  display: flex;
  color: #252525;
  text-decoration: none;
}

.advanced-list li .advanced-link:hover {
  background-color: #e7e6e6;
}

.advanced-list li + li {
  margin-top: 5px;
}

body {
  padding: 10px;
}
<ul class="advanced-list">
  <li>
    <div class="list-content">
      <h4 class="list-header">List item without link</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat augue diam, id ornare neque mollis eu.
    </div>
    <div class="list-img" style="background-image: url(https://placehold.it/250x125?text=250x125)">
    </div>
  </li>
  <li>
    <a href="#" class="advanced-link">
      <div class="list-content">
        <h4 class="list-header">List item with link</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat augue diam, id ornare neque mollis eu. Vivamus semper diam urna, in maximus felis sollicitudin eget. Vivamus sed mi at nunc condimentum placerat. Aenean eget gravida sem.
        Vestibulum mollis eros non fermentum rhoncus.
      </div>
      <div class="list-img" style="background-image: url(https://placehold.it/250x125?text=250x125)">
      </div>
    </a>
  </li>
</ul>

Upvotes: 1

Related Questions