CSS Display Flex。我不能得到它的工作

Question

好吧我有3个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> 

我已经申请内嵌CSS显示了Flex。我在Firefox工作，但是我有跨浏览器的CSS，但我只是专注于让它在Firefox中工作，并首先理解这一点。

的什么即时试图在这里完成我们的目标是使文本2完全相同的高度文本1.

进出口新的这整个柔性的东西，IM相当肯定即时通讯做这完全错了，我一直读文章几个小时，我尝试的一切都无法工作。所以即时通讯假设我明白这一切都是错的

林不知道是否重要，但这是在wordpress内完成的。还有一切都是左移的

我很抱歉，如果这是微不足道的，但即时消失，并且Stackoverflow永远不会让我失败。任何帮助将不胜感激。

Answer 1

你离你想要做的不远。请注意，我从类名中删除了空格，因为空格是多个类的分隔符。 .1和.2是无效的类名称。

您应该使用flex-direction: row;，因为您希望布局水平排列。我使用了flex速记属性来达到所需的结果，该结果代表flex-grow,flex-shrink和flex-basis。

.outer 
 
{ 
 
    display: flex; 
 
    flex-wrap: row nowrap; 
 
} 
 

 
.text1, .text2 
 
{ 
 
    flex: 1 0; 
 
} 
 

 
.text1 
 
{ 
 
    background-color: gray; 
 
} 
 

 
.text2 
 
{ 
 
    background-color: darkgray; 
 
}

<div class="outer"> 
 
    <div class="text1"><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="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div> 
 
</div>

也没有必要对挠性元件使用float。但是，应该没有任何效果什么那么，作为w3c的：

float和clear不会产生浮动或弯曲项目的间隙，和 不要把它乱流。