2つの子要素(A,B)があり、Aは可変、Bは親要素の最大まで横並びで表示させたい

Question

親要素と2つの子要素（左からA,Bと称します）を横並びに配置させたいのですが、その際に、

AはAのサイズそのままに、
Bは余りを親要素分すべて伸ばして表示させたいです。

.sample{
	display: -webkit-flex;
	display: flex;
	background-color: pink;
	padding: 10px 0;
}

.childA{
	background-color: red;
}

.childB{
	background-color: blue;
}

<div class="sample">
	<div class="childA">要素1要素1要素1要素1</div>
	<div class="childB">要素2</div>
</div>

結果↓
![

Aは可変のまま、この青い背景となっているBを親要素の右端まで自動で調整させるCSSの設定方法はありますでしょうか。

いろいろflexboxのオプションから検証してみましたが、再現できませんでした。

CSSのみで出来る方法を探しています。
再現にSassやJavaScriptの調整が必要な場合は「出来ない」で大丈夫です。
古いブラウザでは再現できなくてもOKです。

Answer 1

.childB{
    background-color: blue;
    flex-grow: 1;
}
```**動くサンプル：**[https://jsfiddle.net/yaj7xo6h/](https://jsfiddle.net/yaj7xo6h/)

---

【flex-grow - CSS: カスケーディングスタイルシート | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow](https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow)

【flex - CSS: カスケーディングスタイルシート | MDN】
[https://developer.mozilla.org/ja/docs/Web/CSS/flex](https://developer.mozilla.org/ja/docs/Web/CSS/flex)

Comments

[sanset]

ありがとうございます。理想の動きです。flex-grow: 1;をBにだけ付けるのは試していませんでした。

Answer 2

こちらでいかがでしょうか?

.childA{
    background-color: red;
    flex: 1 1 0%;
}

.childB{
    background-color: blue;
    flex: 0 0 auto;
}

Comments

[sanset]

ありがとうございます。頂いたサンプルを実行したところ、Aが全体に広がってしまいました。