css 질문드려요 ... 채택완료

box1에 mouse over 하면 display:none;  으로 한 box2가 이렇게...

보이도록 하고싶은데

이렇게 보입니다... ㅜㅜ

즉... 링크에서 box5를 가리고 옆에 박스도 늘어나지 않게 하고싶은데

css만으로 방법이 없을까요?

<style>

.wrap {width:900px;padding:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;border:1px solid black;}

.container {width:400px;border:1px solid blue;padding:10px;margin:10px;}

.container .box1 {width:100%;height:100px;border:1px solid red;}

.container .box2 {width:100%;height:100px;border:1px solid red;margin-top:5px;display:none;}

.container:hover .box2 {display:block;}

</style>

<div class="wrap">
  <div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
  </div>
  
   <div class="container">
    <div class="box1">box3</div>
    <div class="box2">box4</div>
  </div>
  
   <div class="container">
    <div class="box1">box5</div>
    <div class="box2">box6</div>
  </div>
  
   <div class="container">
    <div class="box1">box7</div>
    <div class="box2">box8</div>
  </div>
  
   <div class="container">
    <div class="box1">box9</div>
    <div class="box2">box10</div>
  </div>
  
   <div class="container">
    <div class="box1">box11</div>
    <div class="box2">box12</div>
  </div>
</div>

https://codepen.io/phreun/pen/ZEpwLbx