Flexbox CSS em um formulário [duplicado] - html, css, css3, flexbox

Quero usar a propriedade de exibição flex na minha webformulário para ter dois campos de texto lado a lado e crescer automaticamente para preencher o espaço. Eu escolhi usar o flex sobre um layout de tabela porque eu quero que eles se movam para sua própria linha quando a janela encolher.

Eu acredito que estou entendendo mal como usar o flexbox.

Abaixo está meu trabalho até agora (simplificado para postar aqui). Eu estou usando um fieldset como um pai flexível, e cada elemento de formulário que deve "crescer" lado-a-lado é envolto em um div (definido como display: inline para que eles possam estar na mesma linha). Eu também tenho uma legenda para o fieldset, definido como display:block e width:100% para que fique na sua própria linha.

jsFiddle link

fieldset {
display: flex;
flex-direction: row;
justify-content: space-between;
border: none;
}

label {
display: none;
}

legend {
display: block;
width: 100%;
}

fieldset > div {
display: inline;
flex: 1 1 auto;
}

input {
width: 100%;
}

<form>
<fieldset>
<legend>These are Text Fields</legend>
<div>
<input type="text" id="text1">
<label for="text1">Text Field</label>
</div>
<div>
<input type="text" id="text2">
<label for="text2">More Text</label>
</div>
</fieldset>
</form>

Como você pode ver, os divs estão em sua própria linha (apesar da display: inline e coisas flexbox). Se você adicionar uma borda aos elementos div, verá que eles têm 100% de largura no momento, mas mesmo se você definir manualmente uma largura (como 30%), eles permanecerão em suas próprias linhas.

Como posso usar flex para exibir as divs lado a lado e permitir que elas sejam redimensionadas para preencher a largura dos pais?

Respostas:

Duas coisas aqui:

1) Quando você faz display: flex em um elemento, todas as crianças diretas são afetadas. Portanto, no seu exemplo (se estivesse funcionando), a legenda também será exibida na mesma linha.

2) Por qualquer motivo, fieldset não gosta de jogar bem com o flexbox, já que você não quer que a legenda esteja na mesma linha, eu sugiro envolver os elementos que você quer que estejam na mesma linha.

<form>
<fieldset>
<legend>These are Text Fields</legend>
<div class="flex-wrapper">
<div>
<input type="text" id="text1">
<label for="text1">Text Field</label>
</div>
<div>
<input type="text" id="text2">
<label for="text2">More Text</label>
</div>
</div>
</fieldset>
</form>


fieldset {
border: none;
}

.flex-wrapper {

display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}

.flex-wrapper > div {
flex: 1 1 auto;
}


label {
display: none;
}

legend {
display: block;
width: 100%;
}

input {
width: 100%;
}