浏览器在简单刷新时计算出的flexbox宽度很差，但是在强制性上却很好

Question

如果我按Ctrl + F5重新加载页面，则页面正常加载，但是如果我只想按Ctrl + R，则“ pictograms-content” flex div停留在width: 100%上（而不是75 ％），并且该内容从左页边距的末尾开始。因此，结果是右侧溢出。当我按Ctrl + F5时，宽度为75％。

* {
	box-sizing: border-box;
	font-family:"Didact Gothic","Century Gothic", CenturyGothic;
}

.container-parent {
	overflow: hidden;
	position: relative;
	width: 1500px;
	background-color: #ffffff;
	-webkit-box-shadow: 14px 9px 40px 2px rgba(0, 0, 0, 0.43);
	-moz-box-shadow: 14px 9px 40px 2px rgba(0, 0, 0, 0.43);
	box-shadow: 14px 9px 40px 2px rgba(0, 0, 0, 0.43);
	border-radius: 15px;
	margin: auto;
	margin-top: 200px;
}

.container {
	height: 500px;
	display: flex;
	flex-direction: column;
}

body {
	margin: 0px;
}

.pictograms-content {
	display: flex;
	flex-direction: row;
	width: 75%;
	margin: auto;
	margin-top: 100px;
	height: 300px;

}

.pictogram-div {
	display: flex;
	flex-basis: 40%;	
	
}

.pictogram-block {
    display: flex;
    flex-basis: 33.3%;
	flex-direction: column;
	justify-content: center;
		
}

.pictogram-div img {
    height: 100%;
	object-fit: contain;
	opacity: 0.87;
}

.title-div {
	margin: auto;
	flex-basis: 20%;
}

.title-div  h1 {
	text-shadow: 2px 2px 10px #B8B8B8;
	font-weight: bold;
	font-family: 'Orbitron';
	text-align: center;
	font-size: 20px;
	
}

.text-div {
	flex-basis: 40%;
	text-align: center;
}

.text-div p {
	margin: 0;
	margin-left: 5%;
	margin-right: 5%;
}

<div class="container-parent">
			<div class="container">
				<div class="pictograms-content">
					<!--csotany-->
					<div class="pictogram-block">
						<div class="pictogram-div">
							<img src="img/killinsect.png">
						</div>						
						<div class="title-div">
							<h1>
								Rovarirtás
							</h1>	
						</div>
						<div class="text-div">
							<p>
								csótány, poloska, hangya,
							</p>
							
						</div>						
					</div>
					
					<!--modern technikak-->
					<div class="pictogram-block">
						<div class="pictogram-div">
							<img src="img/killinsect.png">
						</div>
						<div class="title-div">
							<h1>
								Változatos irtási technológiák
							</h1>
						</div>
						<div class="text-div">
							<p>
								csótány, poloska, h 
							</p>
						</div>					
					</div>
					
					<!--patkany-->
					<div class="pictogram-block">
						<div class="pictogram-div">
							<img src="img/killrat.png">
						</div>
						<div class="title-div">
							<h1>
								Rágcsálóirtás
							</h1>								
						</div>
						<div class="text-div">	
							<p>
								csótány, poloska, hangya, bolha,csótány, poloska, hangya, bolha,csótány, poloska,
							</p>				
						</div>					
					</div>
				
				
				</div>
			</div>
			<div class="container">
			
			</div>
		</div>

Ctrl+F5

Ctrl+R