How do I override a parent element's width with an implicit child element's width?

Question

I'd like to specify the width of a div element to be the width of a child img element contained within. However, this width is implicit depending on the size of the source image.

The first flex item shows the effect I'm trying to achieve, however, I've had to manually set the value of the width to 150px. How can this be achieved dynamically (preferably without javascript)?

<!DOCTYPE html>
    <html>
     <head>
      <style>
       .flex-item {
        border: 1px solid #30b0b0;
        color: #303030;
        text-align: center;
        padding: 5px;
       }
       
       .flex-container {
        border: 1px solid #30b0b0;
        display: flex;
        justify-content: space-around;
        list-style: outside none none;
        padding: 5px;
       }
      </style>
     </head>
     <body>
      <ul class="flex-container">
       <li class="flex-item">
        <div style="width: 150px; margin: auto;">
         <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
         <p>This text stays within the image</p>
        </div>
       </li>
       <li class="flex-item">
        <div>
         <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
         <p>This text sticks out further than the image</p>
        </div>
       </li>
      </ul>
     </body>
    </html>

score 2 · Accepted Answer · edited May 23 '17 at 10:24

I think making the image container display: table and giving the caption the style display: table-cell; caption-side: bottom should do the trick.

Note, I got some help from this answer: Image caption width to same as image

It was image caption functionality you were looking for, I believe!

<!DOCTYPE html>
    <html>
     <head>
      <style>
       .flex-item {
        border: 1px solid #30b0b0;
        color: #303030;
        text-align: center;
        padding: 5px;
       }
       
       .flex-container {
        border: 1px solid #30b0b0;
        display: flex;
        justify-content: space-around;
        list-style: outside none none;
        padding: 5px;
       }
              
                .image-group-container {
                  display: table;
                }
              
                .caption {
                  display: table-caption;
                  caption-side: bottom;
                }
      </style>
     </head>
     <body>
      <ul class="flex-container">
       <li class="flex-item">
        <div style="width: 150px; margin: auto;">
         <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
         <p>This is in a div with a hard-coded width, so it stays in the proper boundaries.</p>
        </div>
       </li>
       <li class="flex-item">
        <div class="image-group-container">
         <img height="100px" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Metrostation_Mladost_1.JPG/150px-Metrostation_Mladost_1.JPG">
         <p class="caption">This text also stays within image without hard-coding the width.</p>
        </div>
       </li>
      </ul>
     </body>
    </html>

Try to remove style "width: 150px" from the div and you'll see that your solution doesn't work. — Alexander Dayan, Feb 16 '15 at 15:43
I updated the second div, not the first one. The div I updated does not have a hard-coded width. — leishman, Feb 16 '15 at 15:44

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

According to this it can't be done in css :(

But if you are interested in the scripted alternatives..

JavaScript (demo)

window.addEventListener("load", function () {
    var flexItems = document.querySelectorAll(".flex-item");
    for (var i = 0, l = flexItems.length; i < l; i++) {
        var flex = flexItems[i];
        var div = flex.children[0];
        var img = div.children[0];
        div.style.width = img.width + "px";
    }
});

jQuery (demo)

$(document).ready(function(){
    $(".flex-item").each(function(){
        var flex = $(this);
        var div = flex.find("div");
        var img = div.find("img");
        div.css("width",img.css("width"));
    });
});

Hope it helps!

edited May 23 '17 at 12:34

Community

1
1

answered Feb 16 '15 at 15:32

undefined

3,949
4
26
38

From the OP... _"preferably without javascript"_ – j08691 Feb 16 '15 at 15:34
That's why I clarified, according to [**this answer**](http://stackoverflow.com/questions/21783721/parent-element-take-child-size-in-css) it's not possible, hence the *preferably* is revoked and then from me: *if you are interested in the scripted alternatives*.. – undefined Feb 16 '15 at 15:38
I disagree. I believe my answer above works just with only a few lines of CSS. – leishman Feb 16 '15 at 15:47
I think you mean to say, "According to this it canNOT be done in css". I saw that page previously and wondered if the conclusion was applicable for absolute widths (as with this problem) and not just relative/percentage widths. Good script solutions. – jeebs Feb 16 '15 at 15:48
1

Yes I meant can't, and @leishman of course when I was writing these I didn't see your answer, very nice :) – undefined Feb 16 '15 at 15:50

How do I override a parent element's width with an implicit child element's width?

2 Answers2

JavaScript (demo)

jQuery (demo)