フレックスボックス内の要素の動的な幅を作る

Question

フレックスにはあまり使っていないので、私はフレックスでは良くありませんが、これを実現する方法は他にありません。私は簡単なフォームを作って、その右側に説明と入力があるラベルを付けたいと思っています。この説明はどのようなサイズでもかまいませんし、入力は親を満たすためにサイズを増やすでしょう。ここでは、コードは次のとおりです。

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>

それはこのようになります必要があります。

Answer 1

あなただけにlabelのフレックスプロパティを設定する必要がありますflex: 0 1 auto。これが意味：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

ただ、ここ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>