Question

我正试图解决Chrome问题。以下代码在FF和IE中运行良好，但在Chrome中我有点奇怪（Chrome在右边，仅供参考）;

SCSS 代码为：

#contactSuggestWrapper {
  background: #eee;
  background: rgba(233, 233, 233, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100000;
}
#contactSuggestInner {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 15px #C4DF9B;
  padding: .5rem;
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 430px;
  z-index: 100001;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#contactSuggestInner h3 {
  font-size: .9rem;
  margin: 0;
  padding: 0;
}


#contactSuggestInner #textarea-and-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 3px;
  background: green;
}

#moreSuggestions {
  margin-top: .5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  overflow-x: auto;
  flex-grow: 2;
}
#moreSuggestions .lead-link-simple {
  border: 1px solid #C4DF9B;
  box-shadow: 0 0 5px #C4DF9B;
  padding: .25rem;
  width: 200px;
  height: 230px;
  margin-bottom: .5rem;
  margin-right: .25rem;
}

一些示例 HTML ：

<div id="textarea-and-button">
        dfsdfsfs<br>
        dfsdfsfs<br>
        dfsdfsfs<br>
    </div>

    <div id="moreSuggestions" style="background:orange">
        <div class="lead-link-simple">
            bla
        </div>
        <div class="lead-link-simple">
            bla
        </div>
        <div class="lead-link-simple">
            bla
        </div>
        <div class="lead-link-simple">
            bla
        </div>
    </div>

有趣的是，如果我删除了 .lead-link-simple ，那么只有3个：

<div id="moreSuggestions" style="background:orange">
    <div class="lead-link-simple">
        bla
    </div>
    <div class="lead-link-simple">
        bla
    </div>
    <div class="lead-link-simple">
        bla
    </div>
</div>

所以这个问题似乎围绕着另一行：/

我一直在调整代码一段时间，但我无法弄清楚最近发生了什么。也许第二双眼睛可以吗？：）

以下是该问题的演示：http://ultranerds.co.uk/bug/test.html，然后当我从#moreSuggestions删除内容时，它看起来更好：

http://ultranerds.co.uk/bug/test3.html

BTW - 我尝试为此设置一个小提琴，但由于某种原因它没有渲染SCSS（即使它被选中）

Answer 1

主要问题

您只需指定＆＃34; display：flex;＆＃34;和＆＃34;弯曲方向＆＃34;但不是＆＃34; flex-shrink＆＃34;，＆＃34; flex-grow＆＃34; A.k.a. ＆＃34;如果给定的空间不够或太多，该怎么办＆＃34;。

有些浏览器将这些缺失的属性解释为不同。

一个简单的解决方案

只需添加＆＃34; flex-shrink：0;＆＃34;到＆＃34;＃textarea-and-button＆＃34;。瞧瞧！它不会再低于内容高度了。

#contactSuggestInner #textarea-and-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 3px;
  background: green;
  flex-shrink: 0;
}

Chrome无法正确显示HTML块

1 个答案: