html - flex 盒子尺寸不会增加

Question

在下面的代码中，

<style type="text/css">
            #header{
                height: 20px;
                background-color: #2A646C;
                width: 50%;
                margin: auto;
            }
            #container{
                display:flex;
                flex-wrap: wrap;
                border: 2px solid red;
                width: 50%;
                margin: auto;
                padding: 10px;
                background-color: #C4D8E2;
            }
            #container1{
                border: 2px solid yellow;
                width: 100%;
                background-color: #C4D8E2;
            }
            #container1 p span{
                background-color: #C4D8E2;
                color: #5D8AA8;
                font-family: sans-serif;
                font-size: 12px;
            }
            #container1 h3{
                background-color: #C4D8E2;
            }
            #container2{
                border: 2px solid blue;
                width: 45%;
                background-color: #C4D8E2;
                margin-right: 8%;
                display:flex;
                flex-wrap: wrap;
            }
            #container2 form{
                width: 100%;
                height: 100%;
            }
            #container2 p{
                width:100%;
            }
            #container2 span{
                font-weight: bold;
                font-family: "Times New Roman";
                font-size: 16px;
            }
            #container2 #span1{
                color: #5D8AA8;
                margin-right: 5px;
            }
            #container2 #span2{
                color: #5072A7;
            }
            #container2 input[type=submit]{
                border: 1px solid black;
                width: 25%;
                height: 40%;
                margin-left: 68%;
                background-color: #C4D8E2;
            }
            #container3{
                border: 2px solid green;
                width: 45%;
                background-color: #5072A7;
                color: white;
            }
            #container3 form{
                width: 100%;
                height: 100%;
            }
            #container3 input[type=submit]{
                border: 2px solid orange;
                background-color: #5072A7;
                width: 25%;
                height: 10%;
                margin-left: 68%;
            }
            #container3:nth-child(10){
                font-size: 14px;

            }
            #container3:nth-child(16){
                display: inline-block;
                font-size: 10px;
                font-style: underline;
                margin-left: 68%;
            }
        </style>

---

<div id="header"></div><br><br>
        <div id="container">
            <div id="container1">
                <h3>Enter the system</h3>
                <p><span>It is necessary to login in Your account in order to sign up for a course.</span></p>
            </div>

            <div id="container2">
                <p><span id="span1">ARE YOU NEW?</span><span id="span2">REGISTER</span></p>
                <form method="POST" action="javascript:void(0)" enctype="multipart/form-data">
                    <input type="text" name="username" required placeholder="User name" autocomplete="off"
                                pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10">
                <br><br>
                <input type="email" name="emailid" required placeholder="Email" autocomplete="off"
                                    pattern="^[A-Za-z0-9 _.-]+@[A-Za-z.-]+\.[A-Za-z]{3,4}$" size="40" maxlength="30">
                <br><br>
                <input type="password" name="password" required placeholder="Password" autocomplete="off"
                                    pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15">
                <br><br>
                <input type="password" name="confirmpassword" required placeholder="Confirm Password" 
                                    pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15" autocomplete="off">
                <br><br>
                <input type="submit" name="register" value="Register">  
                </form>
            </div>

            <div id="container3">
                <form method="POST" action="javascript:void(0)" enctype="multipart/form-data">
                    <p><span class="span3">ALREADY A STUDENT?</span><span class="span4">LOGIN</span></p>
                    <br><br>
                    <input type="text" name="loginname" required placeholder="User name" autocompleter="off"
                                    pattern="^[A-Za-z0-9._-]{6,10}$" size="40" maxlength="10">
                    <br><br>
                    <input type="password" name="loginpassword" required placeholder="Password" autocompleter="off"
                                        pattern="^[A-Za-z0-9 _.-]{8,15}$" size="40" maxlength="15">
                    <br><br>
                    <input type="checkbox" name="remember" value="yes" id="remember"><label for="remember">Remember me?</label>
                    <br><br>
                    <input type="submit" name="login" value="Login" id="loginbutton">
                    <br>
                    <label>Forgotpassword?</label>

                </form> 
            </div>

        </div>

---

1) container2 或 container3 大小在包含额外元素后不会增加高度，为什么？

2) 如何使用 nth-child 来选择 container3 的最后两个标签？

Answer 1

1) container2 or container3 size does not increase after including additional elements, why?

因为您将整个容器的宽度限制为 width: 50%。

DEMO 1 (您的原始代码，未更改)

试试这个调整:

#container{
    display:flex;
    flex-wrap: wrap;
    border: 2px solid red;
    min-width: 50%; /* adjusted */
    margin: auto;
    padding: 10px;
    background-color: #C4D8E2;
}

DEMO 2

2) How do I use nth-child to pick last two labels of container3?

#container3 > form > label:nth-last-of-type(1) { font-weight: bold; color: red; }
#container3 > form > label:nth-last-of-type(2) { font-weight: bold; color: aqua; }

DEMO 3

引用:http://www.w3.org/TR/css3-selectors/#selectors

---

DEMO 2 的替代方案...

如果您不想改变整个 flex 容器的宽度约束，您可以使表单成为 flex 容器，这会将表单元素限制在容器的边界内。

所以不是这个(如上所述):

#container{
    display:flex;
    flex-wrap: wrap;
    border: 2px solid red;
    min-width: 50%; /* adjusted */
    margin: auto;
    padding: 10px;
    background-color: #C4D8E2;
}

试试这个:

#container2 form{
     width: 100%;
     height: 100%;
     display: flex;            /* new */
     flex-direction: column;   /* new */
}

#container3 form{
     width: 100%;
     height: 100%;
     display: flex;            /* new */
     flex-direction: column;   /* new */
}

DEMO 4

---

更新(基于评论和修改后的问题)

使用 DEMO 4 ，我们可以改进提交按钮的显示:

#container2 input[type=submit]{
        border: 1px solid black;
        /* width: 25%; */
        height: 40%;
        /* margin-left: 68%; */
        background-color: #C4D8E2;

        /* new */
        margin-left: auto;
        margin-right: 5%;
        width: 75px;
}

#container3 input[type=submit]{
        border: 2px solid orange;
        background-color: #5072A7;
        /* width: 25%; */
        height: 10%;
        /* margin-left: 68%; */

        /* new */
        margin-left: auto;
        margin-right: 5%;
        width: 75px;
}

DEMO 5