フルサイズに引き伸ばしたときに2つのdivを並べて配置する方法はありますか？

Question

私は2つの親（body）のサイズにまで伸びていますが、インラインブロック属性を適用すると、divはお互いにではなく上下に配置されます。

私はそれらをお互いの横に置いて、縦にではなく横にスクロールする必要があります。

jsFiddle - http://jsfiddle.net/wJ73v/364/

html 
<div class="red"></div> 
<div class="red-blue"></div> 

css 

html { 
    height: 100%; 
    width: 100%; 
} 
body { 
    margin:0; 
    padding: 0; 
    height: 100% 
} 
.red { 
    background-color: red; 
    height: 100%; 
    width: 100%; 
    display: inline-block; 
} 
.red-blue { 
    background: linear-gradient(red, blue); 
    height: 100%; 
    width: 100%; 
    display: inline-block; 
} 

Answer 1

、次のように行いますが、その垂直方向のスクロールを取り除きたい場合は、あなたが設定することができbody

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    white-space: nowrap; 
 
} 
 
.red { 
 
    background-color: red; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 
.red-blue { 
 
    background: linear-gradient(red, blue); 
 
    height: 100%; 
 
    width: 100%; 
 
    display: inline-block; 
 
}

<div class="red"></div> 
 
<div class="red-blue"></div>

にwhite-space: nowrapを追加bodyのoverflow-y: hidden;

スクロールが必要な場合は、flexboxを使用できます。もちろん

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    display: flex; 
 
} 
 
.red { 
 
    background-color: red; 
 
    height: 100%; 
 
    width: 100vw; 
 
} 
 
.red-blue { 
 
    background: linear-gradient(red, blue); 
 
    height: 100%; 
 
    width: 100vw; 
 
}

<div class="red"></div> 
 
<div class="red-blue"></div>