Input fields not responding to flexbox

Question

I want to create 9 input fields for a product calculator that I'm building. I want to have 3 rows of three columns. However, for some reason when I apply display: flex and flex-direction: row to the parent div this doesn't work. All my input fields are placed in a column regardless of flex-direction and input sizing doesn't work

What am I doing wrong?

Thanks.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.survery-questions {
    display: flex;
    flex-direction: row;
}

.home-price-footer {
    width: 25%;
    height: 45px;
    margin-bottom: 3em;
}


#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

user_14236750 · Answer

Keeping your html intact, A little modification was needed where you gave display:flex, basically the display:flex works for immediate children only and not the the sub-children so immediate child of .survey-questions was

and

are children to hence I added form to your existing selector and gave an additional attribute flex-wrap:wrap to maintain rows and columns layout as you had expected.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* just a little modification in this part */
.survery-questions form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
form > div{
    width: 33.3%;
}

.home-price-footer {
    width: 25%;
    height: 45px;
    margin-bottom: 3em;
}


#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

user_1264804 · Answer

The

element is the only child of your flex container, and is therefore the only element being influenced by it. By moving it outside the flex container things come closer to behaving as you'd like.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.survey-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* added */
}

.survey-questions > div {
    width: 33.33%; /* added */
    padding: 0 10px; /* added */
}

.home-price-footer {
    width: 100%; /* updated */

    height: 45px;
    margin-bottom: 3em;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

Input fields not responding to flexbox

2 Answers