How do I make a parent container the same size as its child without knowing that size ahead of time?-CodePudding

I have a display ad container <div >...ad here...</div>

If the injected ad is 200x300 i want to make .sponsor 200x300. Is that possible with css or do I need some javascript.

CodePudding user response：

Like the others wrote, you can try this with CSS. If that doesn't help you, here is a JavaScript solution:

const ad = document.querySelector('#ad');    /* get the ad */
const container = ad.parentElement;    /* get the div.sponsor */

/* get widht and height of the ad */
const ad_widht = ad.offsetWidth;
const ad_height = ad.offsetHeight;

/* set widht and height of the div.sponsor */
container.style.width = ad_widht   'px';
container.style.height = ad_height   'px';

Working example: (with a button and an event listener to show the effect)

document.querySelector('#shrink').addEventListener('click', function() {
  const ad = document.querySelector('#ad');
  const container = ad.parentElement;
  const ad_widht = ad.offsetWidth;
  const ad_height = ad.offsetHeight;
  
  container.style.width = ad_widht   'px';
  container.style.height = ad_height   'px';
});

.sponsor {
  width: 400px;
  height: 300px;
  background-color: red;
}

#ad {
  width: 300px;
  height: 200px;
  background-color: yellow;
}

<div >
  <div id="ad">
    <p>this is the ad</p>
    <button id="shrink">shrink</button>
  </div>
</div>

CodePudding user response：

In addition to my comment, you should check fit-content, max-content and min-content for the width value.

By default, width and height value are auto For width, it will take all the space available, For height, it will define the height needed to display the content without overflow.

In your case, i suggest leaving the height value as auto unless you need another behaviour.

To quickly explain *-content:

min-content : It will take the minimum space available for its element to be displayed. For example, with text, it will be set to the width of the wider word, and display the minimum word possible per line, in order to get the smallest width possible
max-content : It will take the minimum space available without having to wrap the content, for example, it will be set to the full line of text without new line. It will breakline if the height is higher than the parent.
fit-content : Mix of both, it will be max-content unless the space available is too small, then will switch to min-content

Depending on the child element, you can use different value, but i would suggest leaving height:auto;and set width:min-content; to begin with.

CodePudding user response：

I know that display: table is not the best solution in these days, but using display: table on .sponsor class should do the trick.

.outer {
  background: green;
}

.sponsor {
  background: blue;
  display: table;
}

.sponsor img {
  display: block;
}

<div >
  <div >
    <img src="https://via.placeholder.com/200x300" />
  </div>
</div>

You could inspect element and see that the .sponsor class has the same width and height as the image (200 x 300). Also try to change the image and check if the .sponsor class does indeed have the same size as the image.

EDIT: Another option is to use display: flex on the parent of that div, but this will be really situational, this really depends on how you want the sibling of the .sponsor class behaves:

.outer {
  background: green;
  display: flex;
}

.sponsor {
  background: blue;
}

.sponsor img {
  display: block;
}

<div >
  <div >
    <img src="https://via.placeholder.com/200x300" />
  </div>
</div>