Set width of child div in flex container

Question

I have 4 divs with the class .piece-slide that horizontally scroll across the page within the the div #work , which is a flex element. Within the third .piece-slide div the 3 nested elements are absolutely positioned, this renders the width of the third .piece-slide div to 0, so now I want to programmatically set the width of the third .piece-slide div so that it covers the 3 nested elements.

For some reason I am unable to set this width through CSS. I have also tried through jQuery. It would be much appreciated if some pointed me in the right direction as how to rectify this. Here is a jsfiddle as well as the embedded code below.

 $("#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

Try to remove

flex-direction: column;

from #wrapper .
Or change it to

flex-direction: row;