I'm having a bit of trouble figuring this out and could use some input:
- There's a parent div with an unspecified height, determined by its content.
- Inside this parent div are two 'child' elements; however, I want only one to dictate the parent div's height.
- The other child div contains an image that should occupy 100% of its container (height based on the parent div’s height) using the "inherit" value for the height property.
Here's an image for reference: https://i.sstatic.net/Ccb4d.png
Everything is working well as intended until I add the image. It either fails to fill the container's full height or causes overflow, altering the parent div's height (something I'd like to avoid).
This is the code without the image:
.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 adding the image:
.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>A solution might be setting the image as a background-image, but I prefer not to do it that way. Could someone kindly assist with achieving this approach instead?
Thank you!