<H2> Underlined title auto-width on IE

Question

#skills
{
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: fit-content;
}

<div class="box">
    <h2 id="skills">skills</h2>
    <p>Lorem Ipsum.</p>
</div>

I'm working on a website where I would like to underlined h2 titles in a better way than underlined css property. Founding a trick that consisted in adding a border bottom, I've now problems in auto-fitting content.

My code was organized like this :

HTML part (with my 'box' div which is a flexbox) :

The underline style is perfect but it's not fitted on IE...

I found some questions like this one and tried to modify like :

#skills
{
    display: table;
}

But it doesn't work...

Could you help me ?

Thank you for your help,

Jerry

Answer 1

With your help, I resolved my question. The correct solution was to add an intermediate div like this :

<div class="box">
    <div class="intermediate"><h2 id="skills">skills</h2></div>
    <p>Lorem Ipsum.</p>
</div>

And then define as display: table; skills element.

As box element was a flexbox, skills had the same dimension of his parent. Adding an intermediate div, the intermediate div takes all space but next skills has a proper width.

Thank you for your help !