フレックス、フォーム入力要素がオーバーフローしました

Question

こんにちは私のウェブページ用のフォームを作成しています。私はフレックスを使用して実装しようとしているので、ウィンドウサイズに合わせることができます。私の問題は、lastNameの入力ボックスがオーバーフローすることです。任意のポインタをどのように私はこれを修正することができますように姓の入力ボックスとラベルは、新しい行に落ちるか、可能であれば両方の場合に絞ることができます。ここで何が起こっているの写真とコードはその下になります。

形態リサイズ前：

形態リサイズ後：

コード：

---

#survey { 
 
    border: 1px solid black; 
 
    padding: 15px; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
div#names { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    flex: 1 1 auto; 
 
} 
 

 
div.formRow { 
 
    flex: 1 1 auto; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
div.formRow>* { 
 
    flex: 1 1 auto; 
 
} 
 

 
div.horizontalRow { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
div.horizontalRow>* { 
 
    flex: 1 1 auto; 
 
}

<form id="survey" action="url" method="post"> 
 

 
    <label>Name*</label> 
 
    <br> 
 

 

 
    <div id="names"> 
 
    <div class="formRow"> 
 
     <input type="text" name="firstname"> 
 
     <label for="firstname">First Name</label> 
 
    </div> 
 

 
    <div class="formRow"> 
 
     <input type="text" name="lastname"> 
 
     <label for="lastname">LastName</label> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="horizontalRow"> 
 
    <label for="email">Email Address *</label> 
 
    <input type="email" name="email"> 
 
    </div> 
 

 
    <div class="horizontalRow"> 
 
    <label for="subject">Subject *</label> 
 
    <input type="text" name="subject"> 
 
    </div> 
 

 

 
    <div class="horizontalRow"> 
 
    <label for="message">Message *</label> 
 
    <input type="text" name="message"> 
 
    </div> 
 
    <br> 
 

 
    <div id="submitDiv"> 
 
    <input id="submit" type="submit" value="Submit"> 
 
    </div> 
 

 
</form>

Answer 1

あなたが400ピクセルの下での動作を変更するためにメディアクエリを使用することができます（または任意の他の値がしたい）ので、各入力は同じラインでそれらの両方を持つのではなく、別々の行になります。

また、1行に2つの小さな入力持つよりもUX/UIのためのより良いです：

@media all and (max-width:400px) { 
    div#names { 
    flex-flow: column nowrap; 
    } 
    div.formRow>input { 
    order:1; /*Put the label on top to behave like other fields*/ 
    } 
} 

全コード：私はちょうど400よりも、それは大きな作っ

#survey { 
 
    border: 1px solid black; 
 
    padding: 15px; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
div#names { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
    flex: 1 1 auto; 
 
} 
 

 
div.formRow { 
 
    flex: 1 1 auto; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
div.formRow>* { 
 
    flex: 1 1 auto; 
 
} 
 

 
div.horizontalRow { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
div.horizontalRow>* { 
 
    flex: 1 1 auto; 
 
} 
 

 
@media all and (max-width:400px) { 
 
    div#names { 
 
    flex-flow: column nowrap; 
 
    } 
 
    div.formRow>input { 
 
    order:1; 
 
    } 
 
}

<form id="survey" action="url" method="post"> 
 

 
    <label>Name*</label> 
 
    <br> 
 

 

 
    <div id="names"> 
 
    <div class="formRow"> 
 
     <input type="text" name="firstname"> 
 
     <label for="firstname">First Name</label> 
 
    </div> 
 

 
    <div class="formRow"> 
 
     <input type="text" name="lastname"> 
 
     <label for="lastname">LastName</label> 
 
    </div> 
 
    </div> 
 

 

 
    <div class="horizontalRow"> 
 
    <label for="email">Email Address *</label> 
 
    <input type="email" name="email"> 
 
    </div> 
 

 
    <div class="horizontalRow"> 
 
    <label for="subject">Subject *</label> 
 
    <input type="text" name="subject"> 
 
    </div> 
 

 

 
    <div class="horizontalRow"> 
 
    <label for="message">Message *</label> 
 
    <input type="text" name="message"> 
 
    </div> 
 
    <br> 
 

 
    <div id="submitDiv"> 
 
    <input id="submit" type="submit" value="Submit"> 
 
    </div> 
 

 
</form>