スクロール可能な機能を使って2つのdivを互いに整列させる

Question

HTML/CSSを学び始めました。スクロール可能なdivに2つのdivを整列させることに問題があります。理解を深めるために私は自分のコードを分かち合うつもりです。誰かが私を助けることができれば、本当に感謝しています。前もって感謝します。

「テスト」クラスはすべて、クラス「ボックス」にスクロール可能な機能がある間に、100％の幅を持ち、1つの行に次々と整列されるという考えがあります。

.Wrapper{ 
 
    position:relative; 
 
    width:90vw; 
 
    background-color:blue; 
 
} 
 

 
.Box{ 
 
    display; 
 
    position:relative; 
 
    width:100% 
 
    overflow-x:scroll; 
 
} 
 

 
.Test{ 
 
    width:100%; 
 
    background-color:red; 
 
}

<div class="Wrapper"> 
 
    <div class="Box"> 
 
     <div class="Test"> 
 
     Test 1 
 
     </div> 
 
     <div class="Test"> 
 
     Test 2 
 
     </div> 
 
    </div> 
 
</div>

敬具、

ジョージ・S.

Answer 1

私は私が正しくあなたを理解してかどうかわからないんだけど、これはそれを達成するための一つの解決策です。この解決法は、inlineまたはinline-block要素であれば、ボックスのすべての子要素を1つの行（white-space: nowrap）に強制します。ここjsFiddleは次のとおりです。https://jsfiddle.net/rq98w432/1/

HTML：

<div class="Box"> 
    <div class="Test"> 
     Test 1 
    </div> 
    <div class="Test"> 
     Test 2 
    </div> 
</div> 

CSS：それは働いた

.Box{ 
    width:90vw; 
    background-color:blue; 
    white-space: nowrap; 
    overflow-x:scroll; 
    color: white; 
    padding: 10px; 
} 

.Test { 
    display: inline-block; 
    width: 100%; 
}