フレキシブルボックスレイアウトと画像の大きさの調整仕方に行き詰まっています。

flexとボックスの仕組みがよく分かりません。
(1) まず最初に青い枠のボックスの高さを現在の半分程度に。
(2) (1)を設定した後、赤い枠の中の画像の高さをさらに半分程度に縮小する。

どうのようにすればいいのかアドバスをお願い致します。
cssのコードは文字数制限の都合上一部省略しております。

https://practice2017.web.fc2.com/question_dec182019/idx.html

（追記）
まだまだ勉強不足なので「フレキシブルボックスレイアウト」について、お勧めの専門書が
ございましたら教えて頂けないでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>オリジナルジュースの紹介|架空株式会社</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0"><!-- Google Fonts Montserrat -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="fontawesome/css/all.css" rel="stylesheet"><!-- fontawesome ver5.10.2 Local （オフライン用　削除可能。） -->
<script src="https://kit.fontawesome.com/abda8f59ff.js"></script><!-- fontawesome ver5.3.0 CDN -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js/jquery.tgBrowserWidth.js"></script><!-- 画面幅を表示するスクリプト　製作後削除する。 -->
<script>$(document).ready(tgBrowserWidth());</script><!-- 画面幅を表示するスクリプト 製作後削除する。 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body class="idx"><!-- 【.idx】 ここから↓ -->
<header class="hdr"><!-- 【ヘッダー】 ここから↓ -->
  <section class="cont-01">
    <h1 class="color-limegreen">オリジナル<i class="fas fa-leaf"></i>ジュース</h1>
    <p class="color-orangered">おいしい　うれしい</p>
    <div class="outer-01">
      <div class="wrap-01">
        <p class="color-limegreen">オリジナル<i class="fas fa-leaf"></i>ジュース</p>
        <div class="inner-01">
          <img class="thumb-01">
          <ul>
            <li>肌荒れ</li>
            <li>便秘</li>
            <li>不眠症に</li>
          </ul>
        </div><!-- /.inner-01 -->
      </div><!-- /.wrap-01 -->
      <div class="bg-top-01">
      </div>
    </div><!-- /.outer-01 -->
  </section><!-- /.cont-01 -->
  <nav class="nav-hdr"><!-- 【ヘッダーのナビゲーションメニュー】 -->
    <ul>
      <li><a href="idx.html">製品情報</a></li>
      <li><a href=".html">CMギャラリー</a></li>
      <li><a href=".html">キャンペーン</a></li>
      <li><a href=".html">Q&A</a></li>
    </ul>
  </nav><!-- 【ヘッダーのナビゲーションメニュー】 ここまで↑ -->
</header><!-- 【ヘッダー】 ここまで↑ -->

<div class="wrap-boxes">
  <section class="box-01"><!-- 【.box-01】 ここから↓ -->
    <div class="ctr-01"><!-- 【.ctr-01】 ここから↓ -->
      <h2><i class="fas fa-wine-glass-alt"></i>スムージーみたいな飲み心地</h2>
      <p>当社独自の製法で、スムージーみたいな飲み心地を実現しました。癖が少なくさらっと飲めるジュースになっております。<p>
      <i class="fas fa-glass-whiskey"></i>
    </div><!-- 【.ctr-01】 ここまで↑ --> 
  </section><!-- 【.box-01】 ここまで↑ --> 

  <section class="box-02"><!-- 【.box-02】 ここから↓ -->
    <div class="ctr-02"><!-- 【.ctr-02】 ここから↓ -->
      <h2><i class="fas fa-poo"></i></i>便秘予防に</h2>
      <p>白菜５この食物繊維を含んだオリジナルジュースなら、便秘の予防にも効果的です。<p>
      <i class="fas fa-apple-alt"></i>
    </div><!-- 【.ctr-02】 ここまで↑ --> 
  </section><!-- 【.box-02】 ここまで↑ --> 

  <section class="box-03"><!-- 【.box-03】 ここから↓ -->
    <div class="ctr-03"><!-- 【.ctr-03】 ここから↓ -->
      <h2><i class="far fa-grin-wink"></i>手間いらずで毎日続けられる</h2>
      <p>粉末を溶かすタイプだけでなく、そのまま飲めるペットボトルタイプもご用意しております。<p>
      <i class="fab fa-pagelines"></i>
    </div><!-- 【.ctr-03】 ここまで↑ --> 
  </section><!-- 【.box-03】 ここまで↑ --> 

  <section class="box-04"><!-- 【.box-04】 ここから↓ -->
    <div class="ctr-04"><!-- 【.ctr-04】 ここから↓ -->
      <h2><i class="far fa-star"></i>肌荒れ予防に</h2>
      <p>ビタミンＣやβカロチンなど、不足しがちな美容に良い成分をたっぷり配合しています。<p>
      <i class="fas fa-child"></i>
    </div><!-- 【.ctr-04】 ここまで↑ --> 
  </section><!-- 【.box-04】 ここまで↑ --> 

  <section class="box-05"><!-- 【.box-05】 ここから↓ -->
    <div class="ctr-05"><!-- 【.ctr-05】 ここから↓ -->
      <h2><i class="far fa-sad-tear"></i>不眠症に</h2>
      <p>不眠症の改善に効果があると言われているメラトニンも豊富に含んでいる原料を使用しています。<p>
      <i class="fas fa-bed"></i>
    </div><!-- 【.ctr-05】 ここまで↑ --> 
  </section><!-- 【.box-05】 ここまで↑ --> 

  <section class="box-06"><!-- 【.box-06】 ここから↓ -->
    <div class="ctr-06"><!-- 【.ctr-06】 ここから↓ -->
      <h2><i class="fas fa-yen-sign"></i>一杯あたり８４円</h2>
      <p> オリジナルジュースは一杯あたり８４円のお手頃価格。家計にやさしく無理なく続けられます。<p>
      <i class="fas fa-wallet"></i>
    </div><!-- 【.ctr-06】 ここまで↑ --> 
  </section><!-- 【.box-06】 ここまで↑ --> 
</div><!-- /.ctr-boxes -->

<footer class="ftr"><!-- 【フッター】 ここから↓ -->
  <nav class="nav-ftr">
    <ul>
      <li><a href="#">会社情報</a></li>
      <li><a href="#">利⽤規約</a></li>
      <li><a href="#">プライバシーポリシー</a></li>
      <li><a href="#">サイトマップ</a></li>
    </ul>
  </nav><!-- /.nav-ftr -->

  <div class="copyright"><!-- 【コピーライト】 -->
    Copyright (C) 2019 オリジナルジュース All Rights Reserved.
  </div><!-- 【コピーライト】 ここまで↑ -->
</footer><!-- 【フッター】 ここまで↑ -->
</body><!-- 【.idx】 ここまで↑ -->
<span id="wid"></span><!-- 画面幅表示用スクリプト --><!-- 画面幅を表示するスクリプト 製作後削除する。 -->
</html>

/* production file version CSS : 製作ファイルバージョンCSS */
@charset "utf-8";

/* 【HTML5 Reset Stylesheet ver1.6.1】 ここから↓ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  background     : transparent;
  border         : 0;
  font-size      : 100%;
  margin         : 0;
  outline        : 0;
  padding        : 0;
  vertical-align : baseline;
}

body {
  line-height : 1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display : block;
}

nav ul {
  list-style : none;
}

blockquote, q {
  quotes : none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content : '';
  content : none;
}

a {
  background     : transparent;
  font-size      : 100%;
  margin         : 0;
  padding        : 0;
  vertical-align : baseline;
}

/* change colours to suit your needs */
ins {
  background-color : #ff9;
  color            : #000;
  text-decoration  : none;
}

/* change colours to suit your needs */
mark {
  background-color : #ff9;
  color            : #000;
  font-style       : italic;
  font-weight      : bold;
}

del {
  text-decoration : line-through;
}

abbr[title],
dfn[title] {
  border-bottom : 1px dotted;
  cursor        : help;
}

table {
  border-collapse : collapse;
  border-spacing  : 0;
}

/* change border colour to suit your needs */
hr {
  border-top : 1px solid #ccc;
  border     : 0;
  display    : block;
  height     : 1px;
  margin     : 1em 0;
  padding    : 0;
}

input,
select {
  vertical-align : middle;
}
/* 【HTML5 Reset Stylesheet v1.6.1】 ここまで↑ */


/* 【ページ全体の共通箇所】 ここから↓ */
/* フォントの種類の設定。 */
body {
  font-family : 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
  margin      : 0;
}

body {
  width:100rem;
  width:var(--width-large);
  margin:0 auto;
}

/* 【ヘッダー】 ここから↓ */
.color-limegreen {
  background-color:limegreen;
  background-color:var(--color-ttl-bkgd-limegreen);
  color:white;
  color:var(--color-txt-wht);
}

.color-orangered{
  background-color:peachpuff;
  background-color:var(--color-ttl-bkgd-peachpuff);
  color:orangered;
  color:var(--color-txt-orangered);
}

.outer-01 {
  border: 1rem solid blue;
  display:flex;
}

.wrap-01 {
  border: 1rem solid black;
  flex:1
}

.inner-01 {
  border: 1rem solid red;
  display:flex;
}

.thumb-01 {
  background-image:url(../img/thumb_01.jpg);
  background-size:cover;
  background-position:center;
  width:100%;
  height:100vh;
  flex:1;
}

.inner-01 ul {
  margin-left:2em;
  flex:1;
}

.bg-top-01 {
  background-image:url(../img/bg_top_01.jpg);
  background-size:cover;
  background-position:center;
  width:100%;
  height:100vh;
  box-sizing: border-box;
  border:1rem solid yellow;
  flex:1;
}

/* 【ヘッダーのナビゲーションメニュー】 ここから↓ */
nav.nav-hdr ul {
  margin  : 0;
  padding : 0;
  display         : flex;
  flex-direction  : row;
  justify-content : space-between;
}

nav.nav-hdr li {
  flex-grow    : 1;
  flex-shrink  : 0;
  margin-right : .5rem;
  text-align   : center;
 }

nav.nav-hdr li:last-child {
  margin-right:0
}

.nav-hdr a {
  background-color : limegreen;
  background-color : var(--color-ttl-bkgd-limegreen);
  color            : white;
  color            : var(--color-txt-wht);
  display          : block;
  padding          : 1.5rem;
  text-decoration  : none ;
}

a:hover {
  background-image:linear-gradient(
    rgba(255, 255, 255, .2),
    rgba(255, 255, 255, .2)
  )
}
/* 【ヘッダーのナビゲーションメニュー】 ここまで↑ */
/* 【ヘッダー】 ここまで↑ */

.wrap-boxes h2 {
  background-color : orangered;
  background-color : var(--color-ttl-bkgd-orangered);
  color            : white;
  color            : var(--color-txt-wht);
}

/* 【フッター】 ここから↓ */
.ftr {
  background-color : darkgreen;
  background-color : var(--color-ftr-bkgd-darkgreen);
  font-size:70%;
}

/* 【フッターのナビゲーション】 ここから↓ */
nav.nav-ftr ul {
  display         : flex;
  flex-direction  : row;
  justify-content : center;
}

.nav-ftr a {
  display         : inline-block;
  text-decoration : none ;
  text-align      : center;
  margin          : .5em;
  color            : white;
  color            : var(--color-txt-wht);
}

a:hover {
  background-image:linear-gradient(
    rgba(255, 255, 255, .2),
    rgba(255, 255, 255, .2)
  )
}
/* 【フッターのナビゲーション】 ここまで↑ */

/* 【コピーライト】 ここから↓ */
.copyright {
  text-align   : center;
  color            : white;
  color            : var(--color-txt-wht);
  font-size:90%
}
/* 【コピーライト】 ここまで↑ */
/* 【フッター】 ここまで↑ */
/* 【ページ全体の共通箇所】 ここまで↑ */

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

回答1件

自己解決

body {
width:100rem;
width:var(--width-large);
margin:0 auto;
}

/* 【ヘッダー】ここから↓ */
.color-limegreen {
background-color:limegreen;
background-color:var(--color-ttl-bkgd-limegreen);
color:white;
color:var(--color-txt-wht);
}

.color-orangered{
background-color:peachpuff;
background-color:var(--color-ttl-bkgd-peachpuff);
color:orangered;
color:var(--color-txt-orangered);
}

.outer-01 {
border: 1rem solid blue;
display:flex;
}

.wrap-01 {
border: 1rem solid black;
flex:1
}

.inner-01 {
border: 1rem solid red;
display:flex;
margin: 10vh 0;
}

.thumb-01 {
background-image:url(../img/thumb_01.jpg);
background-size:cover;
background-position:center;
width:100%;
height:25vh;
flex:1;
}

投稿2019/12/18 18:35

taka_oct092018

総合スコア135

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

フレキシブルボックスレイアウトと画像の大きさの調整仕方に行き詰まっています。

関連した質問