Flexbox соответствует высоте ряда при переполнении вправо - PullRequest
Новая
       26

Flexbox соответствует высоте ряда при переполнении вправо

1 голос
/ 10 октября 2019

Я хочу создать макет, подобный приведенному ниже:

enter image description here

Левая колонка имеет указанную ширину (например, 30%). Правый столбец имеет любое количество дочерних элементов, которые переполняются вправо. Эти дочерние элементы должны соответствовать высоте левого столбца, не увеличивая ширину родительского элемента.

В данный момент, если дочерних элементов недостаточно, высота правого столбца увеличивается, поэтому дочерние элементы занимаютполная ширина или все дочерние элементы соответствуют ширине, поэтому они недостаточно высоки.

Для этого необходимо:

  • Поддерживать пропорции всех дочерних элементов
  • Подогнать ростлевого столбца точно
  • горизонтальное переполнение 

.container-a,
.container-b {
  display: flex;
  border: 2px solid red;
}

.container-a {
  flex-direction: row;
  padding: 10px;
}

.flex-child {
  flex: 1;
  margin-right: 10px;
}

.flex-child img {
  width: 100%;
}

.first-child {
  max-width: 40%;
}
<div class="container-a">
  <div class="flex-child first-child">
    <img src="https://picsum.photos/800/450">
  </div>
  <div class="flex-child">
    <div class="container-b">
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random">
        Some text content
      </div>
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random">
        Some text content
      </div>
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random">
        Some text content
      </div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 10 октября 2019

Чтобы этот макет работал, я думаю, вам понадобится ограничение по высоте и сочетание свойств flex. 

.container-a,
.container-b {
  display: flex;
  border: 2px solid red;
}

.container-a {
  padding: 10px;
  height: 150px; /* limits images' intrinsic heights */
}

.flex-child {
  display: flex;
  margin-right: 10px;
}

.container-b>.flex-child {
  flex-shrink: 0;  /* disable flex-shrink */
  flex-direction: column; /* stack items */
}

.flex-child img {
  width: 100%;
  min-height: 0; /* override min-height: auto default */
}

.first-child {
  flex: 1 0 40%; /* equivalent to max-width: 40%, but also disables flex-shrink */
}

* { box-sizing: border-box; } /* factor borders and padding into lengths */
<div class="container-a">
  <div class="flex-child first-child">
    <img src="https://picsum.photos/800/450">
  </div>
  <div class="flex-child">
    <div class="container-b">
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random"> Some text content
      </div>
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random"> Some text content
      </div>
      <div class="flex-child">
        <img src="https://picsum.photos/800/450?random"> Some text content
      </div>
    </div>
  </div>
</div>
...