My flex items don’t shrink when I set the parent width to 100% but shrinks when I set the parent width to 100vw

Question

I am building a website. I want it to be responsive. But for some reason, when I set the width of the parent div to be 100%, the flex items do not shrink. But when I set the parent div’s width to 100vw, they shrink, but an extra width is added to the html window. I have checked, I don’t have any overflowing element from the parent div, any help? I have set the background of the html to blue just to help with debugging

Answer 1

the solution is actually to set width: fit-content.

* {
   width: fit-content;
}