让锚留在屏幕上

Question

屏幕上显示4个锚点：

在悬停锚点放大后，它们将最后一个div推出屏幕：

    #box1{
    height: 100%;
    width: 25%;
    background-color:  black;
    transition: all 500ms ease-in-out;
    
}

#box1:hover{
    height: 100%;
    width: 30%;
    left:-5%;
    
}

#box2{
    height: 100%;
    width: 25%;
    background-color: green;
 transition: all 500ms ease-in-out;
    
}

#box2:hover{
    height: 100%;
    width: 30%;
    left:-5%;
}


#box3{
    height: 100%;
    width: 25%;
    background-color: blue;
   
 
    
   
    
    transition: 500ms ;
    
}

#box3:hover{
    width: 30%;
    height: 100%;
     left:-5%;
    
    
}
#box4{
    height: 100%;
    width: 25%;
    background-color: darkviolet;

    
}

#box4:hover{
    height: 100%;
    width: 30%;
    left:-5%;
     float: right;
}

.box {
    float: left;
   
}

.boxdiv{
    height: 100%;
    width: 100%;
    position:fixed;
}

     <div class="boxdiv">
  <a id="box1" class="box" >
    <div>
        
      </div>
  </a>
     <a id="box2" class="box">
    <div>
        
        </div>
  </a>
     <a id="box3" class="box">
   
  </a>
     <a id="box4" class="box">
    <div>
        
         </div>
  </a>
</div> 

如何让锚点放大，最后一个锚点停留在屏幕上？我希望锚点能够放大，但是紫色锚也会留在视野中。

Answer 1

Flexbox可以做到这一点。

* {
  margin: 0;
  padding: 0;
}
.red {
  background: #f00;
}
.green {
  background: #0f0;
}
.blue {
  background: #00f;
}
.orange {
  background: orange;
}
div {
  height: 150px;
  display: flex;
}
.parent a {
  flex: 1 1 25%;
  transition: flex-basis .5s ease;
}
.parent a:hover {
  flex: 1 0 30%;
}

<div class="parent">
  <a href="#1" class="box red"></a>
  <a href="#2" class="box blue"></a>
  <a href="#3" class="box green"></a>
  <a href="#4" class="box orange"></a>
</div>