Machen Sie dynamische Breite von Elementen innerhalb der Flexbox

Question

Nun, ich bin nicht gut mit dem Flex, weil ich es nicht viel benutze, aber ich denke, es gibt keinen anderen Weg, wie dies geschehen kann. Ich möchte eine einfache Form machen, die ein Etikett mit Beschreibung und Eingabe auf der rechten Seite hat. Diese Beschreibung kann eine beliebige Größe haben und die Eingabe würde ihre Größe erhöhen, um die Eltern zu erfüllen. Hier ist der Code:

div { 
 
    display: flex; 
 
    width: 300px; 
 
    margin-bottom: 20px; 
 
    border: 1px solid red; 
 
} 
 
label { 
 
    height: 21px; 
 
    line-height: 21px; 
 
    font-size: 14px; 
 
    color: black; 
 
    flex: 1; 
 
} 
 
input { 
 
    margin-left: 20px; 
 
    flex: 1; 
 
}

<div> 
 
    <label>Company</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Street</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Who are you?</label> 
 
    <input type="text"> 
 
</div>

Es sollte wie folgt aussieht:

Answer 1

Sie müssen nur stellen Sie die flex Eigenschaft label zu: flex: 0 1 auto. Das bedeutet: flex-grow: 0, flex-shrink: 1flex-basis: auto

div { 
 
    display: flex; 
 
    width: 300px; 
 
    margin-bottom: 20px; 
 
    border: 1px solid red; 
 
} 
 
label { 
 
    height: 21px; 
 
    line-height: 21px; 
 
    font-size: 14px; 
 
    color: black; 
 
    flex: 0 1 auto; 
 
} 
 
input { 
 
    margin-left: 20px; 
 
    flex: 1; 
 
}

<div> 
 
    <label>Company</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Street</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Who are you?</label> 
 
    <input type="text"> 
 
</div>

Answer 2

Gerade flex-order hinzufügen zu beschriften und Eingangs-Tags Siehe hier http://codepen.io/tantata/pen/KNoMWQ

div { 
 
    display: flex; 
 
    width: 300px; 
 
    margin-bottom: 20px; 
 
    border: 1px solid red; 
 
    flex-wrap:nowrap; 
 
} 
 
label { 
 
    height: 21px; 
 
    line-height: 21px; 
 
    font-size: 14px; 
 
    color: black; 
 
    flex-grow: 0; 
 
} 
 
input { 
 
    margin-left: 20px; 
 
    flex-grow: 1; 
 
}

<div> 
 
    <label>Company</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Street</label> 
 
    <input type="text"> 
 
</div> 
 
<div> 
 
    <label>Who are you?</label> 
 
    <input type="text"> 
 
</div>