My text-boxes seem to be preventing my flexbox from working

I recreated my issue with a more plain example.

But essentially, if I put a text input into a flexbox it just doesn’t grow/shrink correctly

Here is the HTML:

<head>
    <link rel="stylesheet" href="./styletest.css">
</head>

<body>
    <div id="container">
        <div id="a">
            <p>text</p>
            <article>
                <input type="text" />
                <input type="text" />
            </article>
        </div>
        <div id="b">
            <p>text</p>
            <article>
                <input type="text" />
                <input type="text" />
            </article>
        </div>
        <div id="c">
            <p>text</p>
            <article>
                <input type="text" />
                <input type="text" />
            </article>
        </div>
    </div>
</body>

And the CSS:

#container{
    display:flex;
    flex-direction: row;
    Height:300px;
    width:300px;
}

#container div{
    height:100%; 
    border: solid red;   
}

#container article{
    display:flex;
    flex-direction: column;
}

#a{
    flex-grow:1;
}

#b{
    flex-grow: 2;
}

#c{
    flex-grow: 2;
}


#container input[type=text]{
    min-width: 0;
    width:10%
}

I am looking to have the divs grow/shrink as a row, but they will each have a flexbox article within them as well that is a flexbox for the text inputs

But placing a text input prevents this from happening. I can place other elements in here without issue

I have tried adding another container within the divs, but no luck

Try making the container div to be a flexbox not article
#container div{
display : flex;
height:100%;
border: solid red;
}

Taking the p tags out of the equation now for simplicity

Do you mean like this?

<head>
    <link rel="stylesheet" href="./styletest.css">
</head>

<body>
    <div id="container">
        <div id="a">
            <input type="text" />
            <input type="text" />
        </div>
        <div id="b">
            <input type="text" />
            <input type="text" />
        </div>
        <div id="c">
            <input type="text" />
            <input type="text" />
        </div>
    </div>
</body>
#container{
    display:flex;
    flex-direction: row;
    Height:300px;
    width:300px;
}

#container div{
    height:100%; 
    border: solid red;
    display:flex;
    flex-direction: column;   
}

#a{
    flex-grow:1;
}

#b{
    flex-grow: 2;
}

#c{
    flex-grow: 2;
}

#container input[type=text]{
    min-width: 0;
    width:10%
}

Sadly, still doesn’t work

image

The existence of the textboxes seems to break the flexboxes

no just adding display flex in container div #a

OK, so it looks like I can make only #a a flexbox, and that allows the divs to change size

But I can’t make #b and #c flexboxes as well

Maybe I should just use a grid layout. Possibly flexbox is just the wrong way to do this

1 Like