Make image inside child div take up 100% height based off of parent div

Question

I'm struggling to work this out and hope someone could offer some suggestions:

• I have a parent div which height is not specified so that it can be determined by its content.
• I then have two 'child' elements inside this parent div, but I only want one of these to determine the height of the parent div.
• The other child div contains an image and this image should take up 100% of its container (whose height should be based off of the height of the parent div) - this is done by specifying the value of height as: inherit.

Image to explain:

I have got everything to work as planned but once I add the image, it either doesn't fill up the full height of its container OR it causes the image to overflow which changes the height of the parent div (which I don't want to happen).

This is the code before the image is added:

.parentDiv {
  width: 100%;
  background-color: grey;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.imageDiv {
  width: 50%;
  height: inherit;
  background-color: orange;
}
.contentDiv {
  width: 50%;
  background-color: lightgreen;
}
.contentDiv p {
  padding-left: 15px;
  padding-right: 15px;
}

<div class="parentDiv">

  <div class="imageDiv"></div>

  <div class="contentDiv">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

</div>

This is after the image is added:

.parentDiv {
  width: 100%;
  background-color: grey;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.imageDiv {
  width: 50%;
  height: inherit;
  background-color: orange;
}
.imageContainer {
  width: 100%;
  height: 100%;
}

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

.contentDiv {
  width: 50%;
  background-color: lightgreen;
}
.contentDiv p {
  padding-left: 15px;
  padding-right: 15px;
}

<div class="parentDiv">

  <div class="imageDiv">
  
    <div class="imageContainer">
      <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg">
    </div>
  
  </div>

  <div class="contentDiv">
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>

</div>

I do know one way around this could be to set the image as a background-image but I don't want to do it like this and would like to know if it can be done in the way I've attempted above.

Hope someone can help!

Answer 1

Try this,

.parentDiv {
  width: 100%;
  height:300px;
  background-color: grey;
}
.imageDiv {
  width: 50%;
  height: inherit;
  background-color: orange;
  float:left;

}
.imageContainer {
  width: 100%;
  height: 100%;
}

.imageContainer img {
  width: 100%;
  min-height: 100%;
  }

.contentDiv {
  width: 50%;
  height:100%;
  float:left;
  background-color: lightgreen;
}
.contentDiv p {
  padding-left: 15px;
  padding-right: 15px;
}