Why doesn't the wrapper wrap around the box?

Question

I'm struggling with a problem which seems simple:

My code:

* {
    font-family: tahoma;
}
body {
    background: #333;
}
.wrapper {
    padding: 10px;
    background: white;
    width: 100%;
}
.box {
    margin-top: 40px;
    width: 1100px;
    height: 400px;
    background: #aaa;
}

<div class="wrapper">
    <div class="box">
        box
    </div>
</div>

The box contained in the wrapper has a fixed size, which might overflow the wrapper on small screens. Why doesn't the wrapper wrap around the box? How would I do that?

You can also check out the issue in this jsFiddle.

Answer 1

In order to make this work:

• Remove width: 100% and add to the wrapper display: inline-block.

• Doing so, will enable the wrapper to have as much width as needed to wrap around the box. Putting width: 100% restricts your wrapper to the width of the screen and in case of the box having a bigger with than that of the screen, it won't work.

• If you do not want to have a horizontal scrollbar, especially on narrower screens use: box-sizing: border-box on the wrapper.

CSS:

.wrapper {
  display: inline-block; /* Ensures that the box stays wrapped */
  padding: 10px;
  background: white;
  box-sizing: border-box; /* Ensures that there won't be a horizontal scrollbar */
}

Here is a working version of your jsFiddle, with both the wrapping issue mended and the horizontal scrollbar abolished.

* {
  font-family: tahoma;
}

body {
  background: #333;
}

.wrapper {
  box-sizing: border-box display: inline-block;
  padding: 10px;
  background: white;
}

.box {
  position: relative;
  margin-top: 40px;
  height: 400px;
  background: #aaa;
}

<div class="wrapper">
  <div class="box">
    box
  </div>
</div>

For reference:

• display: inline-block;
• box-sizing: border-box;