Form in html spawns extra flex column automatically-CodePudding

I want to have an image above my login form and they should be centered on the screen. I want to do this with flex but it creates two columns automatically. 1 for the pic, 1 for the form. If i delete the picture, there is still 2 columns. If i delete the form, the pic div has the whole screen, so no issues. Why do I have this problem? Any responses much appreciated <3

Inspect element view of 2 columns

Inspect element view when form deleted

<template>

    <div >
        <div id="logo">
            
        </div>
        <div id="login-form">
            <form >
                <input type="text" id="user" name="user" placeholder="Username"><br>
                <input type="text" id="pass" name="pass" placeholder="Password"><br>
                <input type="submit" id ="login-btn" value="Login">
            </form>
        </div>
    </div>
    <footer>

    </footer>
  
</template>

<style>
#logo {
        margin: auto;
        background-image: url("../assets/grodan_boll.png");
        background-position: center;
        background-size:contain;
        background-repeat: no-repeat;
        width: 100px;
        height: 130px;
    }

.login-view {
        display:flex;

        align-items: center;
        height: 100%;
        background-image: url(../assets/swamp_bg.jpg);
        background-repeat: no-repeat;
        background-size: 100vw 100vh;
        
    }
</style>

CodePudding user response：

Just add flex-direction: column;

#logo {
  margin: auto;
  background-image: url("https://picsum.photos/900");
  background-position: center;
  background-size:contain;
  background-repeat: no-repeat;
  width: 100px;
  height: 130px;
}

.login-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background-image: url(https://picsum.photos/200);
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}

<div id="demo">
  <div >
    <div id="logo"></div>
    <div id="login-form">
      <form >
        <input type="text" id="user" name="user" placeholder="Username"><br>
        <input type="text" id="pass" name="pass" placeholder="Password"><br>
        <input type="submit" id ="login-btn" value="Login">
      </form>
    </div>
  </div>
  <footer>
  </footer>
</div>