フォームブロックが重なり合わない

Question

私のフォームには2つの入力ボタンがあります。それぞれが100％の幅を持っているので、お互いに積み重ねるべきですが、そうではありません。それらの幅は50％です。どうして？

HTML

<form> 
<div class="input"> 
    <input type="text" class="button" id="email" name="email" placeholder="YOUR EMAIL"/> 
    <input type="submit" class="button" id="submit" value="SUBSCRIBE"/> 
</div>  
</form> 

CSS

body { 
    background-color: yellow; 
} 

form { 
    max-width: 450px; 
    margin: 17% auto; } 
form .input { 
    display: flex; 
    align-items: center; } 
form .input:focus { 
    outline: none; 
    outline: 2px solid #E86C8D; 
    box-shadow: 0 0 2px #E86C8D; } 
form .button { 
    height: 44px; 
    border: none; 
    width: 100%; } 
form #email { 
    background: #FDFCFB; 
    font-family: inherit; 
    color: #737373; 
    letter-spacing: 1px; 
    text-indent: 5%; 
    border-radius: 5px 0 0 5px; } 
form #submit { 
    height: 46px; 
    background: #E86C8D; 
    font-family: inherit; 
    font-weight: bold; 
    color: inherit; 
    letter-spacing: 1px; 
    border-radius: 0 5px 5px 0; 
    cursor: pointer; 
    transition: background 0.3s ease-in-out; } 
form #submit:hover { 
    background: #d45d7d; } 

http://codepen.io/Shalahmander/pen/yMJmBZ?editors=1100

Answer 1

display: flexは、デフォルトでは行の子要素を整列させます。あなたのform .inputクラスにflex-direction: columnを追加して、それらを列に表示させる、つまりお互いに積み重ねる。

body { 
 
    background-color: yellow; 
 
} 
 

 
form { 
 
    max-width: 450px; 
 
    margin: 17% auto; 
 
} 
 
form .input { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
form .input:focus { 
 
    outline: none; 
 
    outline: 2px solid #E86C8D; 
 
    box-shadow: 0 0 2px #E86C8D; 
 
} 
 
form .button { 
 
    height: 44px; 
 
    border: none; 
 
    width: 100%; 
 
} 
 
form #email { 
 
    background: #FDFCFB; 
 
    font-family: inherit; 
 
    color: #737373; 
 
    letter-spacing: 1px; 
 
    text-indent: 5%; 
 
    border-radius: 5px 0 0 5px; 
 
} 
 
form #submit { 
 
    height: 46px; 
 
    background: #E86C8D; 
 
    font-family: inherit; 
 
    font-weight: bold; 
 
    color: inherit; 
 
    letter-spacing: 1px; 
 
    border-radius: 0 5px 5px 0; 
 
    cursor: pointer; 
 
    transition: background 0.3s ease-in-out; 
 
} 
 
form #submit:hover { 
 
    background: #d45d7d; 
 
}

<form> 
 
    <div class="input"> 
 
     <input type="text" class="button" id="email" name="email" placeholder="YOUR EMAIL"/> 
 
     <br class="visible-xs"> 
 
     <input type="submit" class="button" id="submit" value="SUBSCRIBE"/> 
 
    </div> 
 
</form>