Box 1 - Default Settings

Box 2 - Width: 200 pixels

Box 3 - Width: 50% with min-width of 200px and max-width of 500px; when screen resolution is above 1000, the max-width is a binding constraint, so this box is 500 pixels wide. Then below 1000px, the width of 50% is binding, so the size of the box changes when the screen resolution does. This happens until you get to 400px, at which point the min-width of 200px becomes binding and the size remains fixed.

Box 4 - Width: 20 ems. Width is constant, when screen resolution gets less than this, scrollbars appear.