Flex box с двумя столбцами, класс решает, к какому элементу столбца принадлежит

Question

Я хотел бы создать макет, в котором левая сторона содержит несколько элементов, а правая - только один, и занимает место слева, используя flexbox.

Я начал с этого примера, чтобы показать вам, что я хотел бы добиться и в чем моя проблема:

.parent {
  width:100%;
  float: left;
  background: #eee;
}

.text {
  width: 40%;
  float: left;
  clear: left;
  background: yellow;
}

.pdf {
  width: 60%;
  min-height: 200px;
  float: right;
  background: red;
}

<div class="parent">
  <div class="text"> text1 </div>
  <div class="text"> text2</div>
  <div class="text"> text3</div>
  <div class="pdf"> PDF </div>
</div>

Я хотел бы иметь два столбца, где class="text" всегда идет влево, а class="pdf" всегда идет вправо. Я также хотел бы, чтобы .text занимал необходимое им пространство, а .pdf занимал минимальную высоту или, если он был больше, адаптировался к размеру левого столбца.

Проблема, которую вы видите, состоит в том, что Тексты и pdf могут различаться, и если pdf не первый или второй, метод float не будет работать, я также хотел бы поучиться на этом, и поэтому я спрашиваю, как бы вы сделали это с flex. Я провел некоторое исследование и не смог найти ответ на этот вопрос в Google или StackOverflow.

Можно ли сделать это аккуратно с помощью flexbox без изменения макета HTML?

Answer 1

Вы можете достичь желаемого с помощью flexbox, но вам нужно немного изменить свой HTML. Вы можете удалить все текстовые блоки или добавить больше, и сторона PDF расширится, чтобы соответствовать текстовому столбцу. Пожалуйста, попробуйте и дайте мне знать, если это помогло.

* {
  box-sizing: border-box
}

.parent {
  display: flex;
  background: #eee;
}

.text-container {
  width: 40%;
}

.text-container .text {
  background: yellow;
}

.pdf {
  width: 60%;
  min-height: 200px;
  background: red;
}

<div class="parent">
  <div class="text-container">
    <div class="text"> text1 </div>
    <div class="text"> text2</div>
    <div class="text"> text3</div>
  </div>
  <div class="pdf"> PDF </div>
</div>

Answer 2

Это можно сделать с помощью position:absolute, примененного к PDF

.parent {
  background: #eee;
  min-height: 200px;
  position:relative;
  margin:10px;
}

.text {
  width: 40%;
  background: yellow;
}

.pdf {
  width: 60%;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  background: red;
}

<div class="parent">
  <div class="text"> text1 </div>
  <div class="text"> text2</div>
  <div class="text"> text3</div>
  <div class="pdf"> PDF </div>
</div>

<div class="parent">
  <div class="text"> text1 </div>
  <div class="text"> text2</div>
  <div class="text"> text3</div>
  <div class="text"> text1 </div>
  <div class="text"> text2</div>
  <div class="text"> text3</div>
  <div class="text"> text1 </div>
  <div class="text"> text2</div>
  <div class="text"> text3</div>
  <div class="text"> text1 </div>
  <div class="text"> text2</div>
  <div class="text"> text3</div>
  <div class="text"> text1 </div>
  <div class="text"> text2</div>
  <div class="text"> text3</div>
  <div class="pdf"> PDF </div>
</div>