Set div to its first siblings width

Question

I have a column with a flexible image and a description div.

How can I make sure the description width never exceeds the image, when I don't know the image width will be?

The problem happens when the vh gets too small.

What I want to happen:

What happens:

.modal-content {
  width: 80vw;
  height: 80vh;
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.slidencaption {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #B83F41;
}

.mySlides img {
  margin: auto;
  max-width: 100%;
  max-height: 70vh;
  display: block;
}

.caption-container {
  display: block;
  margin: auto;
  text-align: center;
  width: 50%;
  padding: 1px 16px;
  color: white;
  min-width: 100px;
  background: #E94779;
  text-align: center;
  word-break: break-all;
  text-overflow: ellipsis;
}

<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="slidencaption">
      <div class="mySlides">
        <img src="http://i.imgur.com/nKoVqZO.jpg">
        <div class="caption-container">
          <p id="caption">blah blawlhekjr kwjehr kwjehr kwjehr kw kqwjh wk kj hkwehr kwjehr kwejrh wk kw jherkw kwh rdfkhsdkjf ksjdfhk sjdhf k ksjhfks jdhfk js skjdhfk sjdhfkj sdhfk skdjfhksdjfh ksdhf ksdjhfksjdhfkjsh kshdfksjdhfkjs hdf ksjhdfksjh fksh skdfh ksjdhfk
            sj skdfh ksdjfh skskj dhfskjd hfksd </p>
        </div>

      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/a47c7yn5/

Here's a similar question, but I couldn't get the answer to work.

Looks like your code is incomplete, wanna post the rest of it? — DMrFrost, Jul 21 '17 at 23:13

score 1 · Answer 1 · answered Jul 21 '17 at 23:38

1

Your code for this task seems overly complex.

I think what you're looking for may be as simple as this:

.mySlides {
  display: flex;
  flex-direction: column;
  width: 75%;
  margin: 0 auto;
}

.mySlides img {
  width: 100%;
  max-height: 70vh;
}

#caption {
  text-align: center;
}

<div class="mySlides">
  <img src="http://i.imgur.com/nKoVqZO.jpg">
  <p id="caption">blah blawlhekjr kwjehr kwjehr kwjehr kw kqwjh wk kj hkwehr kwjehr kwejrh wk kw jherkw kwh rdfkhsdkjf ksjdfhk sjdhf k ksjhfks jdhfk js skjdhfk sjdhfkj sdhfk skdjfhksdjfh ksdhf ksdjhfksjdhfkjsh kshdfksjdhfkjs hdf ksjhdfksjh fksh skdfh ksjdhfk sj skdfh ksdjfh skskj dhfskjd hfksd</p>
</div>

jsFiddle

answered Jul 21 '17 at 23:38

Michael Benjamin

346,931
104
581
701

Thanks for taking the time to reply, This unfortunately distorts the image and doesn't keep it's ratio when resizing. Changing mySlides width to vh helped with that but, something about that causes the image to be much smaller than even 75 vh though the image itself is huge.I'm currently trying to figure out what's causing the massive shrink down. – duckyduck Jul 22 '17 at 00:29
it totally was that max height, thanks! sorry to ask so much but originally I had it in that modal-content/wrapper div but after reinserting it with this it disregards the parent size and bleeds out, any ideas? – duckyduck Jul 22 '17 at 01:16
It's the `align-items: center`, which is trying to keep the content vertically centered at all times. https://jsfiddle.net/gav43vzd/1/ – Michael Benjamin Jul 22 '17 at 01:56
I guess that's what was going wrong in the initial question, the image needs to be centered that way for images of various sizes, but putting a description below it throws the alignment out of whack. I thought that too but once it squishes past the height of the img+description it still leaks out vertically.i'm pretty new to all of this, how would you go about centering something like while keeping it inside of the modal-content div? – duckyduck Jul 22 '17 at 02:16
I'm not really sure what your overall goal is here, but here's a try at it (btw, I'm testing on Chrome): https://jsfiddle.net/gav43vzd/2/ – Michael Benjamin Jul 22 '17 at 02:21
That's totally my bad for not being very clear and over simplifying the question to an extent, but thanks for bearing with me. It's a modal light box/image gallery, modal-content is in vh and vw because I want the images to fill up the screen but not overflow, which works in the initial jsfiddle when caption-container is on display:none;.but I couldn't figure out a way to add a description that sticks to the bottom of pictures that vary in size without going past their width. – duckyduck Jul 22 '17 at 02:36
But what do you want the modal to do when the content overflows it vertically on narrower screens? In my demo above, I just gave it a vertical scrollbar. However, you could hide the overflowing content. You could also allow the modal to expand (using `min-height: 80vh` instead of `height: 80vh`). – Michael Benjamin Jul 22 '17 at 02:40
To size down until it fits modal-content, prioritizing fitting the description in, I was later going to keep it down to a small word count and using ellipsis if it still exceeds it on some pictures. – duckyduck Jul 22 '17 at 02:49
Adding ellipsis to multi-line text is no easy feat. More difficult and complicated than what you're doing now. But once you solve that problem, it may solve this one, too. https://stackoverflow.com/q/33058004/3597276 – Michael Benjamin Jul 22 '17 at 02:54
I'll opt for the shorter word count until i do then haha, this is the closest I've gotten while trouble shooting here with you: https://jsfiddle.net/1zcbpeL9/ The only thing that's wrong with it is that it doesn't truly stretch to fit the full potential of modal-content. ( I made a little jpeg but i'm not sure how to attach it in the comments.) Thanks again for taking the time out to help out a newbie. – duckyduck Jul 22 '17 at 03:03
You mean the image should fill the width of the modal on wider screens? – Michael Benjamin Jul 22 '17 at 03:06
I think so, I added the images onto the original post though I don't intent to squish the text like i did in that image. I'd just write shorter copy for portrait pictures.But I want the image to fill as much of model-content as it can, depending on the screen. Drats, thanks so much for your help though! – duckyduck Jul 22 '17 at 03:19

score 0 · Answer 2 · answered Jul 21 '17 at 23:36

When the image is loaded we need to find the image's width and apply it to its description div. We may need to consider both onload and screen resize cases as well.

If you can use the jQuery then you can solve this way.

$(document).ready(function() {
    handleImgDescSize();
});

$( window ).resize(function() {
    handleImgDescSize();
});

function handleImgDescSize() {
    $("div.caption-container").width($("#imgId").width());
}

It is working here - https://jsfiddle.net/a47c7yn5/2/

Hope it helps!

Set div to its first siblings width

2 Answers2

jsFiddle