Question

在Chrome中，当我在我的网站上搜索食谱时，它将使用recipeSection的id扩展元素，以适应与搜索请求匹配的所有食谱。

但是在Firefox中，子元素只会从父元素流出（或者当我打开开发工具时，它们都会一起刷入适合容器的情况？）。

我在过去几个小时内对定位和流程进行了大量研究，并在StackOverflow上查看了类似的问题 - 我还没有找到任何可以解决我问题的方法。有什么想法吗？

您可以在此website

进行测试

只需在页面顶部的搜索框中输入任何成分即可。面粉工作。该项目使用了物化框架，但这里没有使用它。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 1

以px而不是百分比更改要测量的填充和边距已解决了该问题。不完全确定原因 - 这个百分比是不是被计算到auto创建的高度，让父容器不足以容纳其子元素？这似乎是一种特殊的互动。

流动在父母的儿童元素在Firefox

1 个答案: