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