将弹性项目扩展到全宽

Question

我正在尝试创建自定义的“ iTunes”样式扩展布局。但是，我遇到了一些问题。我最初曾期望为此使用flex-box。但是我似乎不太能做我想做的事。

我已附上我要创建的图像。本质上是可单击缩略图的网格，具有可扩展的全宽度内容。而全宽方面正是我所努力的。我是否必须在扩展内容上设置一个明确的宽度，否则内容可以弯曲到全角吗？

我要创建的内容：

我已经附加了一个非常基本的Codepen，可以演示我遇到的问题。如果第一张图片是“展开的”，我希望它全宽。

.album-container {
  display: flex;
  flex-direction: row;
}

.album {
  width: 50%;
}

img {
  width: 100%;
}

.expanded-content {
  background: #212121;
  color: #FFFFFF;
}

<div class="album-container">
  <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
    <div class="expanded-content">
      <div>Whatever People Say I Am, That’s What I’m Not</div>
      <div>Arctic Monkeys</div>
    </div>
  </album>
    <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
  </album>
</div>

https://codepen.io/jakefauvel/pen/QoKdJP

Answer 1

如果您想完全保留此HTML结构，并且一次只包含一个弹出窗口，则此方法可以为您提供帮助（请参见代码段）

但是我认为重组HTML代码会更好，更清洁，例如，将.expanded-content从.album-container中移出，并在可能的情况下使用JavaScript更改其内容。

.album-container {
  display: flex;
  flex-direction: row;
  position: relative;
}

.album {
  width: 50%;
}

img {
  width: 100%;
}

.expanded-content {
  background: #212121;
  color: #FFFFFF;
  
  position: absolute;
  left: 0;
  width: 100%;
}

<div class="album-container">
  <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
    
  </album>
    <album class='album'>
    <img alt="album-artwork" src="https://img.discogs.com/grVTPVqiRonKp5ly_ey-moBmO0c=/fit-in/600x600/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-11826116-1524151283-4015.jpeg.jpg">
<div class="expanded-content">
      <div>Whatever People Say I Am, That’s What I’m Not</div>
      <div>Arctic Monkeys</div>
    </div>
  </album>
</div>