How to set flex item height equally

Question

I have a flexbox container and two flex box items: item-img and item-content. item-img have an image in it. I want item-img have height equal the height of item-content and the image will cover all space of it.

It means the item-img's height is set based on the item-content's height. The item-content's height is not fixed and may much bigger or much smaller than the height of the image.

Any help would be appreciated. Thanks so much.

.flex-container {
  display: flex;
  width: 500px;
  border: solid 1px #123;
}

.flex-item {
  max-width: 50%;
  overflow: hidden;
  flex-basis: 50%;
}

.item-img {
  display: flex;
}

img {
  object-fit: cover;
}

<div class="flex-container">
  <div class="flex-item item-img">
    <img src="http://via.placeholder.com/350x350">
  </div>
  <div class="flex-item item-content">
    <p>This is conent with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

kukkuz · Accepted Answer · 2017-09-09T07:32:46.337

Setting height: 100% and max-width: 100% to img and position the image absolutely inside the item-img (so that the container always takes the height of the item-content) - see demo below:

.flex-container {
  display: flex;
  width: 500px;
  border: solid 1px #123;
}

.flex-item {
  max-width: 50%;
  overflow: hidden;
  flex-basis: 50%;
}

.item-img {
  display: flex;
  position: relative;
}

img {
  /*object-fit: cover;*/
  height: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="flex-container">
  <div class="flex-item item-img">
    <img src="http://via.placeholder.com/350x350">
  </div>
  <div class="flex-item item-content">
    <p>This is content with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

<br/><br/>

<div class="flex-container">
  <div class="flex-item item-img">
    <img src="http://via.placeholder.com/50x50">
  </div>
  <div class="flex-item item-content">
    <p>This is content with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

EDIT: Adding a container for the img and positioning it along with object-fit: cover and width: 100% for the img - demo below:

.flex-container {
  display: flex;
  width: 500px;
  border: solid 1px #123;
}

.flex-item {
  max-width: 50%;
  overflow: hidden;
  flex-basis: 50%;
}

.item-img {
  display: flex;
  position: relative;
}

.item-img div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

img {
  object-fit: cover;
  width: 100%;
}

<div class="flex-container">
  <div class="flex-item item-img">
    <div>
      <img src="http://via.placeholder.com/350x350">
    </div>
  </div>
  <div class="flex-item item-content">
    <p>This is content with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

<br/><br/>

<div class="flex-container">
  <div class="flex-item item-img">
    <div>
      <img src="http://via.placeholder.com/50x50">
    </div>
  </div>
  <div class="flex-item item-content">
    <p>This is content with text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p>
    <p>more text</p> 
  </div>
</div>

How to set flex item height equally

1 Answers1

Linked

Related