CSS显示Flex。我不能让它工作

好的，我有三个div，外面的div是一列。所有3个div高度都是由其内容动态生成的

<div class="outer" style="display:flex; flex-direction:column; float:left;">
   <div class="text 1" style="float:left; flex:1; background:red;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
   <div class="text 2" style="float:left; flex:1; background:blue;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>

Lorem ipsum dolor sit amet，是一位杰出的献身者。Aenean ipsum ex，孕妇生命，ultricies sollicitudin magna。无便利。未怀孕的人喝维韦拉凝乳。大前庭和大前庭在一起。南非梅特斯尼索。Mauris孕期大出血。在rutrum erat中的Sed。这是我的座右铭，我的座右铭。她坐在阿梅特·多洛·奥奇旁边。时间是最快的。这是我的梦想。纳姆·维尼纳蒂斯·埃拉特内克，在莫里斯·埃利芬德·乌尔特里斯宫。在hac Habistasse Plateum

Lorem ipsum dolor sit amet，是一位杰出的献身者。Aenean ipsum ex，孕妇生命，ultricies sollicitudin magna

我已经为DisplayFlex应用了内联CSS。我在Firefox中工作，但是我有跨浏览器CSS，但我只是专注于让它在Firefox中工作，并首先理解这一点

我在这里试图实现的目标是使文本2与文本1的高度完全相同

我对flex这个东西还不熟悉，我相当肯定我做的完全错误，我已经读了几个小时的文章，但我尝试的一切都不起作用。所以我想我理解这一切都错了

我不确定这是否重要，但这是在wordpress内完成的。所有的东西都漂浮在左边

---

我道歉，如果这是琐碎的，但我在一个茫然，和Stackoverflow从来没有让我失望。任何帮助都将不胜感激。

你离你想做的事情不远了。请注意，我从类名中删除了空格，因为空格是多个类的分隔符

.1

和

.2

是无效的类名

您应该使用

flex-direction:row您希望布局水平排列。我使用速记属性来达到所需的结果，它代表
flex-grow
、
flex-shorn
和
flex-basis


.outer
{
显示器：flex；
柔性包裹：行nowrap；
}
.text1、.text2
{
弹性：10；
}
.text1
{
背景颜色：灰色；
}
.text2
{
背景色：暗灰色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Aenean ipsum ex，孕妇生命，ultricies sollicitudin magna。无便利。未怀孕的人喝维韦拉凝乳。大前庭和大前庭在一起。南非梅特斯尼索。Mauris孕期大出血。在rutrum erat中的Sed。这是我的座右铭，我的座右铭。她坐在阿梅特·多洛·奥奇旁边。时间是最快的。这是我的梦想。纳姆·维尼纳蒂斯·埃拉特内克，在莫里斯·埃利芬德·乌尔特里斯宫。在hac Habistasse Plateum

Lorem ipsum dolor sit amet，是一位杰出的献身者。Aenean ipsum ex，孕妇生命，ultricies sollicitudin magna

首先，感谢您的快速响应。你太棒了。可以有趣的东西。所以flex-wrap是无效的。改为flex flow，很管用，浏览器帮了我。当我划船的时候，你的位置在上面，它起作用了。然而，它将它们并排堆放。我确实需要把它们一个叠在另一个上面。这能做到吗？如果我把它改成专栏，它就不起作用了。我想我误解了你的问题。如果您想将两个高度相等的容器堆叠在彼此上方，那么使用
flex-direction:column
的尝试是正确的，而我的解决方案是错误的。不过我担心，这确实是flex无法帮助您的事情之一（afaik）。我认为这是正确的，因为我们当时已经突破了极限。那你能推荐JS路线吗？我想留在CSS，唉。出于好奇和理解，我还看到了“让它停止流动”。那么Flex将无法处理position absolute？您可以结束您的问题-但我认为我的答案不正确。JS绝对是一种可能的方式。但这在很大程度上取决于单个用例。也许可以只使用CSS归档您想要的内容。但是你应该展示一个更复杂的演示，展示你的实际问题。我的意思是，我们需要看到这个snippet.flex等高列上面的一些层仅适用于同一行上的项。。。