comment étirer l'élément de menu sélectionné sur le bord gauche de la fenêtre?

Question

J'ai un bloc avec plusieurs éléments. Lorsque je clique sur l'élément de menu, il est en surbrillance et s'étend jusqu'à la bordure gauche de la fenêtre.

Je l'ai fait avec l'aide d'un élément absolument positionné, et régler la largeur à 1000px, mais cette option ne fonctionne pas. Cette barre rouge devrait reposer contre le bord de la fenêtre à n'importe quelle résolution.

html

<div class="flex-menu-area"> 
     <div class="container"> 
      <div class="flex-menu"> 
       <div class="left-flex-column"> 
        <div class="flex-menu-select"><span>item 1</span></div> 
        <div class="flex-menu-select"><span>item 2</span></div> 
        <div class="flex-menu-select"><span>item 3</span></div> 
       </div> 
       <div class="right-left-column"> 
        <div class="object"><span>item1content</span></div> 
        <div class="object"><span>item1content</span></div> 
        <div class="object"><span>item1content</span></div> 
        <div class="object"><span>item1content</span></div> 
        <div class="object"><span>item1content</span></div> 
       </div> 
      </div> 
     </div> 
    </div> 

css

.flex-menu-area { 
    background: #fff; 
    width: 100%; 
    height: 512px; 
    .flex-menu { 
     display: flex; 
     flex-direction: row; 
     flex-wrap: nowrap; 
     height: 100%; 
     .left-flex-column { 
      max-width: 256px; 
      width: 100%; 
      outline: 1px solid gray; 
      height: 512px; 
      .flex-menu-select { 
       font-size: 20px; 
       line-height: 26px; 
       font-weight: 600; 
       text-align: left; 
       color: $text-color; 
       padding-top: 43px; 
       padding-bottom: 43px; 
       max-width: 100%; 
       border-bottom: 1px solid gray; 
       position: relative; 
       &:hover { 
        background: #ccc; 
        &:before { 
         position: absolute; 
         width: 1000px; 
         height: 100%; 
         content: ""; 
         display: block; 
         top: 0px; 
         left: -1000px; 
         background: red; 
        } 
       } 

      } 
     } 
     .right-left-column { 
      outline: 1px solid gray; 
      height: 512px; 
      width: 884px; 
      background: #fff; 
      display: -webkit-flex; 
      display: -moz-flex; 
      display: -ms-flex; 
      display: -o-flex; 
      display: flex; 
      flex-direction: row; 
      align-items: center; 
      justify-content: space-between; 
      background: #eee; 
      .object { 
       outline: 1px solid red; 
       font-size: 20px; 
       line-height: 40px; 
      } 
     } 
    } 
} 

Solution:

&:before { 
    position: absolute; 
    width: 100vw; 
    right: 0; 
    height: 100%; 
    content: ""; 
    display: block; 
    top: 0px; 
    background: #fff; 
    z-index: -1; 
} 

Answer 1

Définissez la largeur et les valeurs de gauche de votre &: avant de:

width: calc((100vw - 100%) /2); 
left: calc(0 - ((100vw - 100%) /2)); 

Je pense que cela devrait aider, mais je n'ai pas accès à un écran assez grand pour tester en ce moment si des excuses si mon les calcs sont légèrement éteints.