There are three ways to solve this problem which are listed below:
Default Case: HTML div is by default fit to content inside it. The example goes like this:
Using inline-block property: Use display: inline-block property to set a div size according to its content.
Using fit-content property in width and height: In this method, we set the width and height property to fit-content value.
- How to dynamically get the content width of a div using AngularJS ?
- How to adjust the width and height of iframe to fit with content in it ?
- HTML width/height Attribute vs CSS width/height Property
- p5.js | width variable
- How to set up fixed width for
- CSS | Height and Width
- CSS | max-width Property
- CSS | min-width Property
- HTML | DOM HR width Property
- Web API | DOMRect width property
- CSS | border-width Property
- CSS | stroke-width Property
- HTML | DOM Pre width Property
- CSS | column-width Property
- CSS | border-right-width Property
- CSS | scrollbar-width Property
- HTML | <img> width Attribute
- CSS | outline-width Property
- HTML | <col> width Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.