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

<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>