How to use fit-content in CSS

Last updated: a year ago

Introduction

The keyword fit-content will make an element width equal to its content based on specific conditions.

h1 {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    box-shadow: inset 0 -6px 0 0 lightgrey;
}

figure {
    width: fit-content;
    margin: 0 auto;
    background: #fff;
    padding: 1rem;
    border-radius: 10px;
}