Solution 1 :

This can be done using position:absolute applied to 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>

Solution 2 :

You can achieve what you want with flexbox but you need to change a lit bit your HTML. You can remove all text blocks or add more and the pdf side will expand to match text column. Please try and let me know if it helped.

* {
  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>

Problem :

I would like to create a layout where the left side contains multiple items the right side only has one and takes up the space of the left using flexbox.

I started with this sample to show you what I’d like to achieve and what is my problem:

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

I would like to have two columns where class="text" always goes to the left, and class="pdf" always goes to the right. I would also like .text to take up the space they need and .pdf to take a min-height or if bigger then adapt to the size of the left column.

The problem you see is that the order of texts and pdf can vary, and if pdf is not first or second the float method will not work, also I would like to learn from this and that is why I ask how you would do it with flex. I did some research and could not find the answer to this on google or StackOverflow.

Can this be done in a neat way with flexbox without changing the HTML layout?

Comments

Comment posted by godzsa

I like the answer very simple and straightforward, just what I need I don’t even know why did I have to overcomplicate it :D. But I will wait with accepting to see if someone has a solution with flex.

Comment posted by godzsa

I accepted this answer however this will only work if the right side only contains one element (as I described in the question), for me this works just fine. It is notexactly what I was looking for tho.

Comment posted by Temani Afif

Can this be done in a neat way with flexbox without changing the HTML layout?

Comment posted by godzsa

Yeah, I like this answer too, but this was also my first thought, but I had liked If did not have to change it.

Comment posted by Dmytro Cheglakov

“I would like to have two columns where…” – so create to columns and then fill them with content. Your current HTML layout is not two columns. I’m sorry I could not help you

By

Leave a Reply

Your email address will not be published. Required fields are marked *