How can I set a parent element's width to the width of a specific child

Question

Say I have the following situation:

<div class="container">
    <span>This span text is longer than the next set of text</span>
    <span>This one is shorter</span>
</div>

I want to be able to make the parent container the size of either the larger or smaller span. How do I set the width/max-width of container to be equal to that of a specific child?

Related: https://stackoverflow.com/questions/19584824/make-child-div-text-content-not-expand-its-parent-fixed-positioned-divs-width — 1j01, Dec 17 '21 at 04:38

score 0 · Accepted Answer · answered Dec 17 '21 at 05:30

You can give the child elements inside a different div. In the .container class you have to add the

.container{
 max-width:min-content; 
}

and in the .child2 class you have to add

 .child2{
width:max-content;
}

.container {
  background-color: lightgrey;
  max-width: min-content;
  outline: solid orange 5px;
  padding: 10px;
}

.child2 {
  background-color: hotpink;
  width: max-content;
}

<div class="container">
<div class="child1">
    <span>This span text is longer than the next set of text</span>
</div>
<div class="child2">
    <span>This one is shorter</span>
</div>
</div>

How can I set a parent element's width to the width of a specific child

1 Answers1