cssのflexboxを使用して、子要素をはじめの子要素の縦と幅に揃えたい

Question

前提・実現したいこと

cssのflexboxを使用して、はじめの子要素の幅、高さを他の子要素に適用する方法がわかりません。

はじめの子要素：画像
その他の子要素：テキスト

画像のサイズをテキスト部分に適用したいです。
もし、画像のサイズよりテキストのサイズが大きければ、テキストのサイズを画像のサイズに合わせ縦スクロールのレイアウトにしたいです。

該当のソースコード

<div class="menu">
  <div class="item-img">
    <a href=""><img src="画像のパス" alt="テスト"></a>
  </div>
  <div class="item">
    <a href="">item 1</a>
  </div>
  <div class="item">
    <a href="">item 2</a>
  </div>
</div>

.menu {
  display: flex;
}
.item-img > a {
  display: block;
}
.item > a {
  display: block;
  overflow-y:scroll;
}

試したこと

・親要素をflexに設定

補足情報（FW/ツールのバージョンなど）

bootstrap

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[nobu09]

どうもありがとうございます。
実現したいことの追記とソースコードの追加をしました。
どうぞよろしくお願いいたします。

[kei344]

画像の縦横比は固定ですか。それともいろいろな縦横比のものがありますか。

[nobu09]

色々な縦横比のものがあります。

Answer 1

kei344 2019/03/30 20:13

画像の縦横比は固定ですか。それともいろいろな縦横比のものがありますか。
↓

nobu09 2019/03/30 20:21

色々な縦横比のものがあります。

CSSだけでは難しいと思います。JavaScriptで最初の要素の高さを取得し、他の要素の高さに設定していくなどする必要があります。

Comments

[nobu09]

ご回答ありがとうございます。
cssだけでは無理なのですね。