How to display inline blocks without breaking them on new line when shrinking parent

Add white-space:nowrap and overflow:hidden to outer:

.outer {
    width: 100%;
    border: 1px solid black;
    white-space:nowrap;
    overflow:hidden;
}

jsFiddle example