Блок div смещается под другой div при уменьшении окна браузера!
Есть родительский div шириной 960px. В нем размещены 2 div как на рисунку. Div отображаются как inline-block. При уменьшении окна браузера 2 div съезжает под 1 div. Нужно чтобы 1 div сжимался при уменьшении окна, так как его ширина в %. Как можно решить такую проблему?

#parent-block{
width: 100%;
max-width: 958px;
margin: 10px auto 0 auto;
background: #F5F5F5;
border: 1px #FFF solid;
box-sizing: border-box;
position: relative;
flex: 1;
}
#left-block{
width: 97%;
height: auto;
max-width: 700px;
display: inline-block;
margin-left: 10px;
}
#right-block{
width: 100%;
max-width: 220px;
margin-left: 15px;
display: inline-block;
vertical-align: top;
}
Kostua Belokopytov, спасибо за ответ, но нужно чтобы правый блок был фиксированным.
МАСТЕР, все так как надо, но блок сжимается только если в нем нет контента/текста, в другом случае так же смещается вниз.
Если родительскому диву указана жесткая ширина, то должна появиться прокрутка при уменьшении окна браузера. код лучше размещать на jsfiddle.net
PS. Поправил немного Костю. https://jsfiddle.net/hvr7m5g3/2/
Покажи какие стили-то у тебя написаны, включая родительский блок. Экстрасенсорика в другом разделе.
https://jsfiddle.net/hvr7m5g3/
Хотя правый блок должен быть жестким...