How does flexbox work when its children are fullscreen

I want to make a horizontal scrolling website
So I used the following

 <div class="flexParent">
        <div class="flexChild"></div>
        <div class="flexChild"></div>
 </div>

.flexParent {
  display: flex;
}

.flexChild {
  height: 100vh;
  width: 100vw;
}

But this causes the screen to divide in two parts and each div getting a 50vw.
But if I change .flexParent to

.flexParent { 
  display: flex; 
  flex-direction: column
  overflow-x: scroll
}

then the other div is rendered on the next page, each child retaining the 100vh and 100vw height and width respectively, requiring me to scroll down.
Why does this not happen in flex-direction: row

js fiddle: http://jsfiddle.net/oenkraLt/16/

You need set the width via flex-basis and also define the flex-shrink to be zero. This can be done using the flex shorthand that also sets the flex-grow. So, declare flex: 0 0 100%;

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-css -->

body {
  margin: 0;
}

.flexParent {
  display: flex;
  column-gap: 1px;
}

.flexChild {
  flex: 0 0 100%;
  height: 98vh;
  background-color: lightblue;
}

<!-- language: lang-html -->

<div class="flexParent">
  <div class="flexChild">Some content 1</div>
  <div class="flexChild">Some content 2</div>
</div>

<!-- end snippet -->