Div Size Automatically size of content

I am trying to make a h2 header for sidebar widgets but I want the width of the div class to be whatever width the content becomes. It seems I can't just set a width because those headlines with longer content then shorter content makes it break.

How can I simply make width stretch/change depending on the length of conten开发者_如何学Pythont there is? Any help would be greatly appreciated.

As far as I know, display: inline-block is what you probably need. That will make it seem like it's sort of inline but still allow you to use things like margins and such.

If you are coming here, there is high chance width: min-content or width: max-content can fix your problem. This can force an element to use the smallest or largest space the browser could choose…

This is the modern solution. Here is a small tutorial for that.

There is also fit-content, which often works like min-content, but is more flexible. (But also has worse browser support.)

This is a quite new feature and some browsers do not support it yet, but browser support is growing. See the current browser status here.

If display: inline; isn't working, try out display: inline-block;. :)

The easiest is:

width: fit-content;

I faced the same issue and I resolved it by using: max-width: fit-content;

The best way to do this is to set display: inline;. Note, however, that in inline display, you lose access to some layout properties, such as manual height and vertical margins, but this doesn't appear to be a problem for your page.

width: -moz-fit-content;
              width: fit-content;