javascript - 在 flex 容器中设置子div的宽度

Question

我有 4 个类为 .piece-slide 的 div，它们在 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

尝试删除

flex-direction: column;

来自#wrapper。
或者改成

flex-direction: row;