선택한 메뉴 항목을 창의 왼쪽 가장자리까지 늘리는 방법은 무엇입니까?

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

솔루션 :

이전에 :

Answer 1

는 폭과 &의 왼쪽 값을 설정 난 그 도움이해야한다고 생각

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

,하지만 지금은 테스트하기에 충분히 큰 화면에 대한 액세스 권한이없는 사과 그렇다면 내 계산은 약간 꺼져 있습니다.