在柔性容器中設置子div的寬度

Question

我有4個div與類.piece-slide水平滾動頁面內的div #work，這是一個flex元素。在第三個.piece-slide div中，3個嵌套元素是絕對定位的，這使得第三個.piece-slide div的寬度爲0，所以現在我想以編程方式設置第三個.piece-slide div的寬度，以便它覆蓋3個嵌套元素。

由於某些原因，我無法通過CSS設置此寬度。我也嘗試通過jQuery。如果有人指出我如何糾正這一問題，那將是非常值得讚賞的。這裏是jsfiddle以及下面的嵌入代碼。

$("#third-div").outerWidth("100vw");

#wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
.content { 
 
    flex: 1; 
 
} 
 

 
#work { 
 
    height: 100%; 
 
    overflow-x: scroll; 
 
    display: flex; 
 
    background-color: red; 
 
} 
 

 
.piece-slide { 
 
    display: flex; 
 
    align-items: center; 
 
    position: relative; 
 
    padding-right: 5em; 
 
    box-sizing: border-box; 
 
    border-right: 1px solid black; 
 
} 
 

 
.piece { 
 
    width: 25vw; 
 
    margin: 10px; 
 
} 
 

 
.piece img { 
 
    max-width: 100%; 
 
} 
 

 
#third-div { 
 
    /* D0ES NOT WORK */ 
 
    width: 100vw; 
 
    background-color: green; 
 
} 
 

 
#third-div a { 
 
    position: absolute; 
 
} 
 

 
#third-div a:nth-child(1) { 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#third-div a:nth-child(2) { 
 
    top: 25vw; 
 
    left: 25vw; 
 
} 
 

 
#third-div a:nth-child(3) { 
 
    left: 60vw; 
 
}

<div id="wrapper"> 
 
    <div class="content"> 
 
    <div id="work"> 
 

 
     <div class="piece-slide"> 
 
     <a class="piece"> 
 
      <img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png"> 
 
     </a> 
 
     </div> 
 

 
     <div class="piece-slide"> 
 
     <a class="piece"> 
 
      <img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080"> 
 
     </a> 
 
     <a class="piece"> 
 
      <img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080"> 
 
     </a> 
 
     </div> 
 

 
     <!-- THIRD DIV WHERE WIDTH SHOULD BE SET --> 
 
     <div id="third-div" class="piece-slide"> 
 
     <a class="piece" num="1"> 
 
        Nested Element 1<img src="http://i.stack.imgur.com/yZlqh.png"> 
 
       </a> 
 
     <a class="piece" num="2"> 
 
        Nested Element 2<img src="http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif"> 
 
       </a> 
 
     <a class="piece" num="3"> 
 
        Nested Element 3<img src="http://suplugins.com/podium/images/placeholder-02.jpg"> 
 
       </a> 
 
     </div> 
 
     <div class="piece-slide"> 
 
     <a class="piece"> 
 
      <img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

嘗試從#wrapper刪除

flex-direction: column; 

。
或更改爲

flex-direction: row;