初心者です。flexboxの文字を縦横比を維持したまま小さくしたいです

Question

前提・実現したいこと

コーディング初学者です。質問お願いします
BOXの真ん中の文字が画面を縮小してもコンテンツからはみ出す事無く真ん中のまま縮小したいのですが
画面幅を縮小していった際に途中で文字が飛び出してしまいます。

この見た目のまま縮小したいのですが

このように文字が飛び出していってしまいます
どなたか解決法を教えてください

発生している問題・エラーメッセージ

画面幅を縮小していくと文字がボックスから飛び出してしまいます。

該当のソースコード

<div class="wrapper">
		<ul class="main_portfolio">
								<li>
										<div class="first"></div>
										<div class="second"></div>
										<div class="third"></div>
											<p class="txt">p</p>
								</li>
								<li>O</li>
								<li>
										<div class="first1"></div>
										<div class="second1"></div>
										<div class="third1"></div>
									  <p class="txt1">R</p>
								</li>
								<li>T</li>
								<li>●</li>
								<li>F</li>
								<li><div class="first2"></div>
										<div class="second2"></div>
										<div class="third2"></div>
									  <p class="txt2">O</p></li>
								<li>L</li>
								<li>
										<div class="first3"></div>
										<div class="second3"></div>
										<div class="third3"></div>
									  <p class="txt3">I</p>
								</li>
								<li>O</li>
						</ul>
</div>

ソースコード

.wrapper{
	max-width: 1160px;
}
.main_portfolio {
	padding: 36px 0 20% 81px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 858px;
}
.main_portfolio li {
	width: 17%;
	max-width: 147px;
	max-height: 166px;
	font-family: 'Arial Black', Gadget, 'sans-serif';
	font-size: 968%;
	text-align: center;
	border: 1px solid #000000;
	margin-bottom: 26px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
/*ポートフォリオ 背景設定*/
.first,
    .second,
    .third {
      height: 166px;
      width: 100%;
    }
.first,
    .second,
    .third {
      position: absolute;
    }
.second,
    .third {
      opacity: 0;
    }
.first {
      animation: first 5s infinite;
      background: linear-gradient(#ff8989, #ff8989);
      z-index: 10;
    }
      @keyframes first {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }
.second {
      animation: second 5s infinite; animation-delay: 2s;
      background: linear-gradient(#ffadad, #ffadad);
      z-index: 20;
    }
      @keyframes second {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third {
      animation: third 5s infinite;
      animation-delay: 8s;
      background: linear-gradient(#ffd6d6, #ffd6d6);
      z-index: 30;
    }
      @keyframes third {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }
.txt {;
      position: absolute;
      width: 100%;
      z-index: 1000;
    	top:-28px;
    }
.first1,
    .second1,
    .third1 {
      height: 166px;
      width: 100%;
    }
.first1,
    .second1,
    .third1 {
      position: absolute;
    }
.second1,
    .third1 {
      opacity: 0;
    }
.first1 {
      animation: first 5s infinite;
      background: linear-gradient(#c4ff89,#c4ff89);
      z-index: 10;
    }
      @keyframes first1 {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }
.second1 {
      animation: second 5s infinite; animation-delay: 2s;
      background: linear-gradient(#d1ffa3, #d1ffa3);
      z-index: 20;
    }
      @keyframes second1 {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third1 {
      animation: third 5s infinite;
      animation-delay: 8s;
      background: linear-gradient(#edffdb,#edffdb);
      z-index: 30;
    }
      @keyframes third1 {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }
.txt1 {;
      position: absolute;
      width: 100%;
      z-index: 1000;
    	top:0px;
    }
/*Oのcss*/
.first2,
    .second2,
    .third2 {
      height: 166px;
      width: 100%;
    }
.first2,
    .second2,
    .third2 {
      position: absolute;
    }
.second2,
    .third2 {
      opacity: 0;
    }
.first2 {
      animation: first 5s infinite;
      background: linear-gradient(#89c4ff,#89c4ff);
      z-index: 10;
    }
      @keyframes first2 {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }
.second2 {
      animation: second 5s infinite; animation-delay: 2s;
      background: linear-gradient(#a8d3ff, #a8d3ff);
      z-index: 20;
    }
      @keyframes second2 {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third2 {
      animation: third 5s infinite;
      animation-delay: 8s;
      background: linear-gradient(#d6eaff,#d6eaff);
      z-index: 30;
    }
      @keyframes third2 {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }
.txt2 {;
      position: absolute;
      width: 100%;
      z-index: 1000;
    	top:0px;
    }
/**/
.first3,
    .second3,
    .third3 {
      height: 166px;
      width: 100%;
    }
.first3,
    .second3,
    .third3 {
      position: absolute;
    }
.second3,
    .third3 {
      opacity: 0;
    }
.first3 {
      animation: first 3s infinite;
      background: linear-gradient(#ffff84,#ffff84);
      z-index: 10;
    }
      @keyframes first3 {
        0% {opacity: 1.0;}
        10% {opacity: 0.8;}
        20% {opacity: 0.6;}
        30% {opacity: 0.4;}
        40% {opacity: 0.2;}
        50% {opacity: 0.1;}
        60% {opacity: 0.2;}
        70% {opacity: 0.4;}
        80% {opacity: 0.6;}
        90% {opacity: 0.8;}
        100% {opacity: 1.0;}
      }
.second3 {
      animation: second 3s infinite; animation-delay: 2s;
      background: linear-gradient(#ffffad, #ffffad);
      z-index: 20;
    }
      @keyframes second3 {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }

    .third3 {
      animation: third 3s infinite;
      animation-delay: 8s;
      background: linear-gradient(#ffffcc,#ffffcc);
      z-index: 30;
    }
      @keyframes third3 {
        0% {opacity: 0;}
        10% {opacity: 0.2;}
        20% {opacity: 0.4;}
        30% {opacity: 0.6;}
        40% {opacity: 0.8;}
        50% {opacity: 1.0;}
        60% {opacity: 0.8;}
        70% {opacity: 0.6;}
        80% {opacity: 0.4;}
        90% {opacity: 0.2;}
        100% {opacity: 0;}
      }
.txt3 {;
      position: absolute;
      width: 100%;
      z-index: 1000;
    	top:0px;
    }
/*ここまでポートフォリオ 背景設定*/

.main_portfolio li:nth-child(3){
	background: #a5d4ad;
}
.main_portfolio li:nth-child(7){
	background: #9fd9f6;
}
.main_portfolio li:nth-child(9){
	background: #fff9b1;
}
.main_portfolio li:nth-child(5){
	position: relative;
}

試したこと

いろいろ試しましたがどうしても解決できませんでした

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

背景にアニメーションを使ってましてCSSのコードがかなり長く見づらくなっていてお手数お掛け致します。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

フォントの％指定は親要素のサイズから~％、という意味なので、画面の横幅に合わせて変化させるようにするのであれば、vw(viewport width)を使うのはいかがでしょうか。

ここのコードを、

.main_portfolio li {
font-size: 968%;
}

例えばこんな感じに。

.main_portfolio li {
font-size: 10vw;
}

また、ブラウザのデフォルトのフォントのサイズはおおよそ以下のようになっていると理解しています。
100% = 1em = 1rem = 16px = 12pt

vwやvhの指定に関して、こちらのページが参考になるかもしれません。

Comments

[pennybettylady]

丁寧な解説と参考サイトまでご提示していただいてありがとうございました。vwに変えたところ理想に近いレイアウトに持っていくことができました。