Flex box with two columns, class decides which column item belongs to

user_2092686 0
Viewed 162

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?

css html
2 Answers

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>

user_86203330

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>

user_24247750
Related