0

I have an image of a fixed aspect ratio, but of responsive format, as the first item in a two column flex row, as follows:

<div class="d-flex flex-column flex-md-row">
  <!-- main photo -->
  <img class="" src="http://lorempixel.com/300/160" srcset="http://lorempixel.com/400/225 400w,
  http://lorempixel.com/475/267 475w,
  http://lorempixel.com/540/304 540w,
  http://lorempixel.com/600/338 600w,
  http://lorempixel.com/800/450 800w,
  http://lorempixel.com/950/534 950w,
  http://lorempixel.com/1080/608 1080w,
  http://lorempixel.com/1200/675 1200w" sizes="(min-width: 1200px) 475px, (min-width: 992px) 400px, (min-width: 768px) 300px, (min-width: 576px) 540px, 100vw">
  <!-- details -->
  <div class="p-3 d-flex flex-column justify-content-center w-100">
    <div class="py-2 scroll-overflow">
      A LONG, LONG, LONG TEXT GOES HERE!
    </div>
  </div>

How can I have the long, long text above scroll into the div as soon as the "convenient" height is reached, that being the height of the neighbouring image. I cannot set a fixed height to the div since, the image being responsive, its height changes when the user moves the window.

Sammy
  • 3,395
  • 7
  • 49
  • 95
  • Possibly use `http://lorempixel.com/300/160` for your sample images in this post to allow us to help further. – pokeybit Jun 27 '17 at 16:53
  • `img` doesn't play so well being a flex item, so wrap it. Also, make your code sample work properly so we can see what is going on, or else it is quite useless – Asons Jun 27 '17 at 17:48
  • Sorry about that, just changed to lorempixel.com – Sammy Jun 27 '17 at 18:53

1 Answers1

0

This seems like a pretty standard use case for media queries. Whenever you find that you need to change something "when a convenient height is reached" (to borrow your words), you can consider using a media query to change the dimensions upon reaching a set dimension. Example:

@media (max-width: 1200px) {
  .py-2 {
    height: /* something */;
    width: /* something */;
  }
}

Hopefully this will provide you with the level of control over the div dimensions that you need.

yoursweater
  • 1,883
  • 3
  • 19
  • 41
  • So you mean to say that actually setting the `div` height is a must in this case? – Sammy Jun 27 '17 at 17:40
  • 1
    Actually, it looks like this might have already been covered in a different thread... [see here](https://stackoverflow.com/questions/12473744/force-height-of-div-to-match-image). Those options might work for you better than media queries – yoursweater Jun 28 '17 at 15:44