![enter image description here](https://i.stack.imgur.com/nXRK7.gif)

Three boxes, a container, left box and main box.

```
/* Left menu */
.leftMenu{
    width: 200px;
    border:2px solid green;
    height:100px;
    float:left;
    min-height:100%;
}

/* Main Content area */
.mainBox{
    border:2px solid red;
    min-height:100%;
}
.mainWrapper{
    border:2px solid white;
}

```

With the HTML:

```
<div class="mainWrapper">
    <div class="leftMenu">
        left
    </div>
    <div class="mainBox">
        main<br /><br /><br /><br /><br />
    </div>        
</div>

```

My question is, why is the green box (left menu) overflowing outside the wrapper?