Flexboxでレイアウトをしているときに、 ガター に em や px などの固定値を指定するのではなく、 % 値を指定したいときに起きる問題です。 <div class="grid"> <div class="item"> <div class="inner">1</div> </div> <div class="item"> <div class="inner">2</div> </div> </div> .grid { display: flex; width: 500px; } .item { padding-top: 10%; padding-right: 10%; width: 50%; background-color: #c4ddb9; } .inner { background-color: #a1c6e7; } 分かりやすいように簡単なHTMLとCSSを用意しました。