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="https://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>

Not sure why it works but change `width: 100vw;` to `min-width: 100vw;` and it should be fine :) — Thodoris, Sep 07 '17 at 07:50
https://stackoverflow.com/questions/41228403/control-width-of-individual-children-in-flex-container — Santhosh, Sep 07 '17 at 08:02

score 0 · Answer 1 · edited Sep 07 '17 at 09:17

0

Try to remove

flex-direction: column;

from #wrapper.
Or change it to

flex-direction: row;

edited Sep 07 '17 at 09:17

General Failure

2,421
4
23
49

answered Sep 07 '17 at 07:59

Black

16

Set width of child div in flex container

1 Answers1