flex box size does not increase

Question

In the below code,

<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 or container3 size does not increase in height after including additional elements, why?

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

Michael Benjamin · Answer 1 · 2015-12-23T12:27:09.080

3

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

Because you have the overall container's width limited to width: 50%.

DEMO 1 (your original code, unaltered)

Try this adjustment:

#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

For reference see: http://www.w3.org/TR/css3-selectors/#selectors

An alternative to DEMO 2...

In the event you prefer not to alter the width constraint of the overall flex container, you could make the forms flex containers, which would confine the form elements to the containers` boundaries.

So instead of this (as outlined above):

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

Try this:

#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

Update (based on comments and revised question)

Using DEMO 4, we can improve the display of the submit buttons with this:

#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

edited Dec 23 '15 at 12:27

answered Dec 23 '15 at 02:01

Michael Benjamin

346,931
104
581
701

am talking about height of `container2` not width. do you see the register button going outside `container2`? – overexchange Dec 23 '15 at 08:55
hey, your demo4 and demo5 still shows the register button outside `container2` – overexchange Dec 25 '15 at 08:37
What browser are you using? It's all in the container in my testing here. – Michael Benjamin Dec 25 '15 at 12:06
am using firefox 45.0. In chrome 47.0, labels are not affected with your changes. this is my [code](https://github.com/shamhub/FrontEndDev/blob/master/acadgild/assignments/session8/assignment1/file.html) after changes – overexchange Dec 25 '15 at 12:59
Using your revised code (posted in the comment above), instead of `height: 40%` for the register button in `.container2`, use `height: 10%`, like in your login button in `.container3`. [**DEMO**](https://jsfiddle.net/uzczgokk/6/). One button has `height: 40%` the other has `height: 10%`. That's why the register button is much bigger. – Michael Benjamin Dec 25 '15 at 17:51
I know that. But my question is, if the button goes to 40%, why the container2 does not increase its height? – overexchange Dec 26 '15 at 01:33
The reason involves your use of percentage heights, and how different browsers interpret these values when they are not in conformance with the spec. Here's how percentage heights should be used: [**explanation**](http://stackoverflow.com/a/31728799/3597276). Your code is not adhering to the spec, so browsers are rendering differently. – Michael Benjamin Dec 26 '15 at 03:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98995/discussion-between-michael-b-and-overexchange). – Michael Benjamin Dec 26 '15 at 03:36
For example, instead of `height: 40%` on register button, try `height: 40em`. Container2 will expand to accommodate button. – Michael Benjamin Dec 26 '15 at 03:43

score 0 · Answer 2 · answered Dec 23 '15 at 02:16

about your second point ...

it total you have 2 labels so you can use "nth-of-type" see the code I gave color for the labels .

#container3 label {
    background: #f0f none repeat scroll 0 0;
}
#container3 label:nth-of-type(1) {
    background: #ff0 none repeat scroll 0 0;
}
#container3 label:nth-of-type(2) {
    background: #f00 none repeat scroll 0 0;
}

score -1 · Answer 3 · answered Dec 23 '15 at 01:58

for your first point ...

put the BTN height in PX it will fix your problem

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

see this fiddle https://jsfiddle.net/b4mdz048/ plus the best practice is to add padding to the buttons its better

I will suggest that you use bootstrap or other CSS framework

flex box size does not increase

3 Answers3