在flex容器中設置子div的寬度

Question

我有4個div，其類為.piece-slide ，它在div #work內水平滾動頁面，該頁面是flex元素。 在第三個.piece-slide div div中，絕對定位了3個嵌套元素，這使第三個.piece-slide div 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

嘗試刪除

flex-direction: column;

來自#wrapper 。
或將其更改為

flex-direction: row;