如何將選定的菜單項拉伸到窗口的左邊緣？

Question

我有一個塊有幾個項目。當我點擊菜單項時，它突出顯示並延伸到窗口的左邊界。

我在絕對定位的元素的幫助下完成了此操作，並將寬度設置爲1000px，但此選項不起作用。該紅色條應以任何分辨率靠在窗戶邊緣。

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; 
      } 
     } 
    } 
} 

解決方案：

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

Answer 1

設置寬度和您的&的左值：前：

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

我覺得應該幫助，但我沒有獲得足夠大的，現在來測試屏幕，所以如果我的道歉計算稍微偏離。