Firefoxの親要素から流出してくる子要素

Question

Chromeでは、自分のウェブサイトでレシピを検索すると、IDがrecipeSectionの要素が検索要求に一致するすべてのレシピに合うようにストレッチされます。

しかし、Firefoxでは、子要素は親要素の外に流出します（または開発ツールを開くと、すべてが一緒になってコンテナに収まります）。

私は最後のカップルの時間に配置とフローに関する多くの研究を行い、StackOverflowに関する同様の質問を見ています。私はまだ私の問題を解決できるものは見つけていません。何か案は？

あなただけのページの上部にある検索ボックスに任意の成分を入れ、このwebsite

でそれをテストすることができます。小麦粉は働く。このプロジェクトでは、マテリアライズフレームワークを使用していますが、ここではあまり使用されていません。代わりに、問題を解決した割合のピクセルで測定されるパディングとマージンを変更

#recipeSection { 
 
    width: 70%; 
 
    height: auto; 
 
    background-color: #e5e5e5; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.recipeStyle { 
 
    width: 80%; 
 
    height: auto; 
 
    margin: 2.5%; 
 
    padding: 1%; 
 
    border-radius: 5px; 
 
    font-size: 2.2rem; 
 
    color: #2d2d2d; 
 
    text-align: left; 
 
    font-family: 'mada'; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
.recipeTitle { 
 
    width: 80%; 
 
    cursor: pointer; 
 
    padding: 10px; 
 
}

<div id="recipeSection"> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
    <div class="recipeStyle card grey lighten-5"> 
 
    <div class="recipeTitle">Example Recipe Title</div> 
 
    </div> 
 
</div>

Answer 1

。なぜ、このパーセンテージがautoで作成された高さに計算されず、親コンテナはその子要素のために十分に大きくならないのですか？それは独特の相互作用のようです。