Question 45714 in CSS Question posted in
Some basic documentation can be found here.

Difference between `width: fit-content` and `width: 100%` – CSS

What is the difference between

div {
  width: fit-content;
}

and

div {
  width: 100%;
}
Tags:

2

Answers


  1. 0

    The best to understand is to try it …

    <style>
    .parent {
        background-color: red;
        width: 500px;
    }
    .child-fit {
        background-color: blue;
        width: fit-content;
    }
    .child-100 {
        background-color: yellow;
        width: 100%;
    }
</style>
    <div class="parent">
    <div class="child-fit">
        <p>FIT CONTENT</p>
    </div>
    <div class="child-100">
        <p>100%</p>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    width 100% will stretch to the whole width of the parent

    fit-content will make it as wide as it’s children

    https://css-tricks.com/almanac/properties/w/width/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search