Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS The Solution

Logan Nguyen
Logan Nguyen
2,898 Points

When I set box-sizing: border-box nothing changes. I still have to scroll to view the content.

When I use the box-sizing: border-box; property nothing changes and I still have to scroll to view the content.

/* =========================================================== Practice CSS Box Model ============================================================== */

.box {

/* Apply a fluid width of 90% and a height of 300px. The width of .box should get no wider than 600px. */

width: 90%; height: 300px; max-width: 600px;

/* Add 20 pixels of padding on all four sides. */ padding: 20px;

/* Apply a 2px solid border to each side. */ border: 2px solid #8292b1;

/* Use margins to center .box on the page. */ margin: 0 auto;

/* Prevent the contents of .box from overflowing. */

overflow-y: scroll; /* Force border-width and padding values into the total width and height of .box */ box-sizing: border-box;

}

1 Answer

I believe the box-sizing property adjusts everything (border and padding) to fit in the parameters given (height 300px, max-width, etc...). This would not affect the scrolling.