Limit height of div based on neighbor div

Question

i have two div elements inside of parent div. These two elements are supposed to be next to each other. On the left is image, on the right is text. The image is loaded in dynamicly, so i cant tell what height it will be. I need the parent element to have total height of the image height, thats working. I am just using height set to auto. The problem comes with the text on the right. I want that to be fill the available height created by the image, but currently, if the text is too long it will extend the whole parent height over the image height. Creating empty gap under image. The text can be very long so i need the text to be cut off and use overflow set to scroll.

The problem is how do i make the text element on the right respect the height of the element on the left. I cant make it child of the elment on the left, because its an image. I dont know how to pass the height of the image to the text element on the right. Only solution i can think of is to put on the right side the image as well, hide it and put the text on top of it. But it seems very clumsy.

Thanks for any tips.

Edit: I am using React so i would prefer to evade Jquery if possible in any way.

Answer 1

As long as you constrain the width of the image to a known fixed value then you can have dynamic heights with the following HTML & CSS which also gives you scrollable texts next to the images:

* {
  margin: 0;
  padding: 0;
}

:root {
  --image-width: 200px;
}

.container {
  position: relative;
  margin: 20px auto;
  max-width: 600px;
}

img {
  width: var(--image-width);
}

p {
  overflow-x: auto;
  position: absolute;
  top: 0;
  left: calc(var(--image-width) + 10px);
  bottom: 0;
  right: 0;
}

<div class="container">
  <img src="https://source.unsplash.com/random/200x200">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x100">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x400">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>

<div class="container">
  <img src="https://source.unsplash.com/random/200x200?v=1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed risus ultricies tristique nulla aliquet enim. Sed pulvinar proin gravida hendrerit lectus a. Consectetur a erat nam at lectus urna duis convallis convallis. Egestas integer eget aliquet nibh praesent tristique magna. Molestie a iaculis at erat pellentesque adipiscing. Tincidunt arcu non sodales neque sodales ut etiam. Lobortis mattis aliquam faucibus purus in. Suspendisse ultrices gravida dictum fusce ut placerat orci. Enim ut tellus elementum sagittis vitae et leo duis ut. Adipiscing elit ut aliquam purus sit amet luctus. Sit amet dictum sit amet justo donec. Elementum eu facilisis sed odio. Vitae suscipit tellus mauris a diam maecenas. Mauris in aliquam sem fringilla ut morbi tincidunt augue. Condimentum mattis pellentesque id nibh tortor id. Odio morbi quis commodo odio aenean sed adipiscing diam. Sed cras ornare arcu dui vivamus. Fringilla phasellus faucibus scelerisque eleifend.</p>
</div>