Html 具有两列的Flex box，类决定列项所属的列

我想创建一个布局，左侧包含多个项目，右侧只有一个，并使用flexbox占用左侧的空间

我从这个示例开始，向您展示我想要实现的目标和我的问题：

.parent{
宽度：100%；
浮动：左；
背景：#eee；
}
.文本{
宽度：40%；
浮动：左；
清除：左；
背景：黄色；
}
.pdf{
宽度：60%；
最小高度：200px；
浮动：对；
背景：红色；
}

文本1
文本2
文本3
PDF

这可以使用应用于PDF的

位置：绝对


.parent{
背景：#eee；
最小高度：200px；
位置：相对位置；
利润率：10px；
}
.文本{
宽度：40%；
背景：黄色；
}
.pdf{
宽度：60%；
位置：绝对位置；
排名：0；
右：0；
底部：0；
背景：红色；
}

文本1
文本2
文本3
PDF
文本1
文本2
文本3
文本1
文本2
文本3
文本1
文本2
文本3
文本1
文本2
文本3
文本1
文本2
文本3
PDF
使用flexbox可以实现您想要的功能，但您需要稍微更改HTML。您可以删除所有文本块或添加更多文本块，pdf端将展开以匹配文本列。请试着让我知道这是否有用


*{
框大小：边框框
}
.家长{
显示器：flex；
背景：#eee；
}
.文本容器{
宽度：40%；
}
.text容器.text{
背景：黄色；
}
.pdf{
宽度：60%；
最小高度：200px；
背景：红色；
}

文本1
文本2
文本3
PDF
我喜欢简单明了的答案，只是我需要的，我甚至不知道为什么我要把它复杂化：D.但我会等着接受，看看是否有人有flex解决方案。我接受了这个答案，但只有当右侧只包含一个元素（如我在问题中所述）时，这才有效，对我来说这很好用。这并不是我想要的。这可以用flexbox在不改变HTML布局的情况下以一种简洁的方式完成吗？是的，我也喜欢这个答案，但这也是我的第一个想法，但我喜欢如果不必改变它的话。“我想有两个列，其中…”-所以创建列，然后用内容填充它们。您当前的HTML布局不是两列。对不起，我帮不了你