```
.parent {
    max-width: 750px;
    height: 100px;
    background-color: red;
    margin: 0;
    padding: 0;
}
.block1 {
    width: 100px;
    height: 100%;
    float: left;
    background-color: black;
}
.block2 {
    width: 650px;
    height: 100%;
    float: left;
    background-color: black;
}

<div class="parent">
    <div class="block1"></div><div class="block2"></div>
</div>

```

I would like `.block2` get smaller as `.parent` gets smaller. `max-width: 650px;` does not work for some reason. When the browser gets to small `.block2` goes onto another line and rather then that I would like it to simply remain the maximum size.