CSSディスプレイフレックス。私はそれを働かせることはできません

Question

私は3つのdivsを持っています外の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> 

私は表示用FlexにインラインCSSを適用しました。私はFirefoxで働いていますが、私はクロスブラウザCSSを持っていますが、私はちょうどFirefoxでここで働いて、これを最初に理解することに集中しました。

ここで達成しようとするものイムの目標は、テキスト2この全体のフレックス事に新しいテキスト1.

イム、イムかなり特定のイムは完全に間違って、IVEは読んでいこれを行うとまったく同じ高さにすることです数時間の記事や、私が試したことは何もしません。だから私はこれをすべて間違って理解していると仮定しています。

重要なことはわかりませんが、これはwordpress内で行われています。また、すべてが浮遊しています

これは簡単ですが、私は損失で、私は謝罪し、Stackoverflow決して失敗します。どんな助けでも大歓迎です。

Answer 1

あなたがしたいことから遠く離れていません。空白は複数のクラスの区切り文字であるため、クラス名から空白を削除したことに注意してください。 .1および.2は無効なクラス名です。

レイアウトを水平に配置するには、flex-direction: row;を使用する必要があります。 flex-grow、flex-shrink、およびflex-basisという希望の結果に達するために、flex略語プロパティを使用しました。

.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のように、どのようなので、今まで効力を持ちません。