flexboxで親要素の幅を子要素に合わせる方法

Question

下記のようなコードで親要素.wrapperのwidthを子要素.containerのwidthに応じて伸縮させたい
と考えております。もちろんブロック要素のため.wrapperは一杯にその親要素の幅になってしまいます。

これを子要素の幅に合わせる場合、子要素にdisplay:inline指定をすればとも書いてあったのですが
効果がありませんでした。flexboxを使用しているためかもしれませんが、原因が分かりません。

下記のようにflexboxを使用しつつ子要素の幅に親要素の幅を合わせることは可能でしょうか？
宜しくお願い申し上げます。

jsfiddle

<div class="wrapper">
 <div class="container">piyo</div>
 <div class="container after">hoge</div>
 <div class="container after">fuga</div>
</div>

.wrapper{
  display:flex;
  background:#b8b8b8;
  padding:20px;
}

.container{
  border:1px solid #000000;
  width:100px;
  display:inline;//??
}

.after{
  margin-left:10px;
}

Comments

[HayatoKamono]

子要素の幅は固定なのですよね？

[pegy]

コメント有難うございます。はい、ご理解の通りです。

[HayatoKamono]

回答しました！

Answer 1

Demo

https://codepen.io/anon/pen/ejwYqE

HTML

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
  </div>
</div>

CSS

.wrapper {
  display: inline-block;
  background-color: green;
}
.flex-container {
  display: flex;
  background-color: gray;
  padding: 20px;
}
.flex-item {
  height: 50px;
  width: 100px;
}
.flex-item:nth-of-type(odd) {
  background-color: red;
}
.flex-item:nth-of-type(even) {
  background-color: black;
}
.flex-item:nth-of-type(n + 2) {
  margin: 0 0 0 10px;
}

Comments

[pegy]

コメントを頂きありがとうござます。
更に親要素を設定して全体をinline-block要素化してしまうのですね！
無事解決しました、cssは本当になれることに大変ですが、こうして
そんなことができるんだ！と発見があるたびに楽しいです〆
御礼申し上げます。

[HayatoKamono]

flexboxは覚えること多いですが、頑張ってくださいー！

Answer 2

/*変更点*/
.wrapper{
  display: inline-block;
}
.container{
  display: inline-block;
}

こうですね

ちなみに，CSSのコメントアウトは/* comment */しかないので，うっかり//commentとかしちゃうと，その後にかいたCSSが効かなくなるので注意です

あと，IE,Edge等を無視すれば，widthにキーワード値をいれて調節できます

• width | MDN
• CSS での横幅 (width) 、高さ (height) の指定にキーワード値を使う
• Can I use

Comments

[pegy]

コメント有難うございます。flex-boxは捨てて全てin-line要素で処理するということですね。
コメントアウトについても有難うございます。失礼いたしました。
fit-contentプロパティは調べてみたのですが、子要素の調整ではないでしょうか？

[liveasnotes]

fit-content等の値は，子要素に合わせて親要素を調整する，Widthのプロパティ値ですが，上述の通り，ブラウザ対応が行き渡っていないので，IE,Edge対策として，妥協版CSSを書くか，ポリフィルを当てることになります

あと，inline要素ではなく，inline-block要素です
inline-blockは，名前の通りinlineとblockの中間のような仕様になっています
クラス名からして，中に複数の要素をいれるものと思われたので，inline要素ではなく，inline-block要素にしています

widthをcalc()や%で指定したり，さらに複雑なスタイルを当てた要素を内包させる予定なら，.containerにdisplay:flexした方が良いかもしれません
現時点では，そこまでの対応は必要なさそうだったので，できるだけ単純なコードにしています

もっとも，子要素の幅が「完全に」固定なら，
.wrapper{
width: 360px;
}
の追記と，
.container{
display: inline;
}
の削除だけで済みます

HTMLの書き方については，その「文書」の部品がもつ意味によって変わってきますので，現時点では書き換えを進めてはいませんが，もしリンクであれば
<nav>
　<ul>
　　<li><a href="#a">linkA</a></li>
　　<li><a href="#b">linkB</a></li>
　　<li><a href="#c">linkC</a></li>
　</ul>
</nav>
というようなマークアップをした上で，CSSを書くと良いです

nav要素は一見余計なように見えますが，複雑なスタイルを当てる際に，サポート役になってくれることもあるので，温かい目で見守ってあげてください

[pegy]

なるほど、コメント有難うございました。
chromeで子要素のwidthのプロパティ値にfit-contentを設定してうまくいかなかったので、もう一度仕様を見直してみます。
あまり使い慣れてはいないのですが、アンカータグを横並びにする場合には<ul><li>要素が良いとされているのですね。
<nav>タグについては、全く使用したことがないため、この機会にその持ち味を勉強してみようと思います！改めて有難うございました！

[liveasnotes]

>子要素のwidthのプロパティ値にfit-content
回答に添えたリンク先の記事を読んでもらえれば分かると思うのですが，そのキーワード値は「親要素に」かけるものです．他に，min-content, max-content, fit-content, border-box, content-box, available...などがあり，これらを「親要素に」かけることで，「子要素の幅」に合わせて，「親要素のwidth」を変えることができます．もちろん，内包要素がなければ，効果はかなり分かりづらいと思うので，先述したQiitaの記事を参考に，色々試してみてください．

あと，パソコンと向き合うときのコツの1つに，ボーっとする，というものがあります
プログラミングにおいては，たった1文字の間違いでもエラーとなります．これを防ぐ方法は，基本的には画面と「にらめっこ」するしかないのですが，ボーっとしている瞬間に間違いのある箇所に気付く，というのもよくある話です．仕様書を確認するときも同様で，あまり意気込み過ぎず，スーパーのチラシでもみるような感じで，気楽に眺めると，脳のデフォルトモードネットワークも良く働いて，細かい違いに気付きやすくなります

[pegy]

アドバイスありがとうございます。
とっても面白い考え方ですね。確かに気を張って調べ物をすることが多いので、思い切ってリラックスして楽しみながら時には取り組んでみることを心がけてみようと思います。
本当に感謝です！