Расширение гибких элементов до полной ширины

Question

Я пытаюсь создать собственный макет в стиле iTunes.Тем не менее, я затрагиваю несколько вопросов.Я изначально предполагал использовать flex-box для этого.Но я не могу сделать то, что я хочу сделать.

Я приложил изображение того, что я пытаюсь создать.По сути, это сетка кликабельных миниатюр с раскрывающимся содержимым на всю ширину.И с полным аспектом я борюсь.Я собираюсь установить явную ширину для расширяющегося контента, или будет ли возможность контента сгибаться до полной ширины?

Что я пытаюсь создать:

Я приложил очень простой кодовый блок, который демонстрирует проблему, с которой я столкнулся.Если бы первое изображение было «расширенным», я бы хотел, чтобы оно было на всю ширину.

.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>