Specific child tag should not expand parent tag

Asked Apr 15 '19 at 10:10

Active Apr 15 '19 at 10:15

Viewed 32 times

I have HTML:

<figure style="display:inline-block;">
   <img src="https://i.imgur.com/k1Crowy.jpg" width="200">
   <figcaption> This is some random text that should not expand the figure tag beyond the width of the img tag </figcaption>
</figure>

I want the <figure> tag to have the width of the <img> tag, which works just fine.

The problem is the content of the <figcaption> tag expands the width of the <figure> tag. How can I make it so the <figcaption> will be limited to the width of the <img> tag. So 200px in above example.

I can't edit the HTML. Can only adjust CSS.

What I've tried so far

position:absolute approach on <figcation>. Problem is that it won't expand the height of the <figure> tag.
Obviously, I can set a fixed width to <figure> tag (like width:200px), but I can't predict the width of the image.
jQuery approach where I grab the width of the image and add it to the figure tag. But I want to avoid a JS solution.

edited Apr 15 '19 at 10:15

asked Apr 15 '19 at 10:10

Henrik Petterson

6,862
20
71
155

1

Beautiful. Every question should come with a *what i've tried so far* section. +1 – Gary Woods Apr 15 '19 at 10:10
do you want width of image size exactly? – Mohammed Rabiulla RABI Apr 15 '19 at 10:13
@MohammedRabiullaRABI Yes. – Henrik Petterson Apr 15 '19 at 10:15
2

`width:0;min-width:100%;` to figcaption – Temani Afif Apr 15 '19 at 10:15
2

@TemaniAfif This looks like it is a hack, and may not work in all browsers. – Henrik Petterson Apr 15 '19 at 10:17
1

there is no reason it doesn't work in all the browser since width/min-width are widely supported ... in case you find any bug with any browser you can edit your question to highlight it (as a side note, the question still remain a duplicate since the issue is the same, any new/better answer should be added to the dupliate target) – Temani Afif Apr 15 '19 at 10:19
There is also [`width: min-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/width#min-content_2) (doing exactly that), but it's not widely supported. – Styx Apr 15 '19 at 10:27

Specific child tag should not expand parent tag

What I've tried so far

0 Answers0