横並びのflexボックスで最後のボックスの長さを親の長さまで伸ばしたい

どなたか、以下の場合でどんな工夫をされているか教えていただければ幸いです。

例：
html

<div class="wrapper">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>

css

.wrapper {
    display: flex;
}

このようなソースの中で、ボックスAやBのwidthはコンテンツによって可変となってしまう状況の中で、Cだけはどうしても親ボックスであるwrapperのツラに合わせたいと思っております。
JSを使えば、A、Bのwidthを取ってきて引いてあげれば問題なく解決するのですが、JSを使わずCSSだけで解決する方法がないかなと考えているのですが、私の知識ではなかなか解決に至ることができませんでした。
どなたか、良い方法をご存知であればご教授願えないでしょうか？

kei344

2017/05/03 13:46

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

mie0224

2017/05/03 13:56

すみません、codeボタンのことを初めて知りました。ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1.c {
2	flex-grow: 1;
3}
4```**動くサンプル：**[https://jsfiddle.net/yjthpemq/](https://jsfiddle.net/yjthpemq/)
5
6---
7
8【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
9[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/)
10
11【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
12[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)
13
14【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
15[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)