Question

If you’ve ever shrunk down your browser window, you’ll notice that the webpage content shrinks down to some extent and then scroll bars start appearing. How is that done in CSS?

Answer 1

If I understand your question correctly, you are looking for the min-width property instead of a fixed width, so that the content can shrink down to a certain size.

.some-shrinkable-element {
   width: 30%;
   min-width: 100px;
}

This would create an element that is 30% the width of its parent, and will shrink as you make your window smaller, untill the element reaches 100px, then it stuck on that width.