Flex Box With Two Columns, Class Decides Which Column Item Belongs To

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

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;
}

<divclass="parent"><divclass="text"> text1 </div><divclass="text"> text2</div><divclass="text"> text3</div><divclass="pdf"> PDF </div></div><divclass="parent"><divclass="text"> text1 </div><divclass="text"> text2</div><divclass="text"> text3</div><divclass="text"> text1 </div><divclass="text"> text2</div><divclass="text"> text3</div><divclass="text"> text1 </div><divclass="text"> text2</div><divclass="text"> text3</div><divclass="text"> text1 </div><divclass="text"> text2</div><divclass="text"> text3</div><divclass="text"> text1 </div><divclass="text"> text2</div><divclass="text"> text3</div><divclass="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;
}

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