How to block the width extension of sibling elements when creating a hover with a css transition-CodePudding

I need to increase the width of a list of elements when I hover over a certain element using a CSS transition. The CSS functionality works, but the problem is that the hover moves the sibling elements. How can this problem be overcome with CSS?

.aside-menu__element {
  width: 68px;
  height: 68px;
  background-color: #999;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 1s;
}

.aside-menu__element:hover {
  background-color: green;
  border-radius: 20px;
  width: 300px;
}

<div >
  <div ><i ></i></div>
  <div ><i ></i></div>
  <div ><i ></i></div>
</div>

The link below shows the HTML and CSS code I used: codepen

CodePudding user response：

As I understood, it should work. Add `margin-left: auto;` to `.aside-menu__element` like this.

.aside-menu__element {
  .....;
  margin-left: auto;
}

CodePudding user response：

just add this code

.aside-menu { 
  position:fixed;
  right:50px;
  top:150px;
  display: flex;    
  align-items: flex-end;
  flex-direction: column;
}

working sample codepen

.aside-menu {
    position:fixed;
    right:50px;
    top:0px;
   display: flex;    
  align-items: flex-end;
  flex-direction: column;
}

.aside-menu__element {
     width: 68px;
    height: 68px;
    background-color: #999;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 1s;
}

.aside-menu__element:hover {
    background-color: green;
    border-radius: 20px;
    width: 300px;
}

<div >
  <div ><i ></i></div>
    <div ><i ></i></div>
    <div ><i ></i></div>
</div>

CodePudding user response：

Use flexbox on the parent element

.aside-menu {
  position: fixed;
  right: 50px;
  top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.aside-menu__element {
  width: 68px;
  height: 68px;
  background-color: #999;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 1s;
}

.aside-menu__element:hover {
  background-color: green;
  border-radius: 20px;
  width: 300px;
}

<div >
  <div ><i ></i></div>
  <div ><i ></i></div>
  <div ><i ></i></div>
</div>