Chrome不能正确显示HTML块

contactSuggestWrapper{
背景:eee;
背景:RGBA(233、233、233、0.8);
位置:固定;
顶部:0;
左:0;
宽度:100%;
高度:100%;
显示:无;
调整内容:中心;
项目对齐:居中;
Z指数:100000;
}
#联系人建议{
边界半径:8px;
背景:fff;
盒影:0 0 15px c4df9b;
衬垫:5雷姆;
宽度:100%;
高度:100%;
最大宽度:800px;
最大高度:430px;
Z-指数:100001;
溢出:隐藏;
显示器:柔性;
弯曲方向:立柱;
}
#建议联系人H3{
字体大小:.9rem;
边距:0;
填充:0;
}


#联系人建议输入文本区域和按钮{
显示器:柔性;
柔性包装:包装;
调整内容:周围空间;
下边距:3倍;
背景:绿色;
}

#更多建议{
上边距:.5雷姆;
显示器:柔性;
柔性包装:包装;
调整内容:周围空间;
溢流-X:自动;
弹性增长:2;
}
#更多建议。引导链接简单{
边框:1px实心c4df9b;
盒影:0 0 5px c4df9b;
衬垫:25雷姆;
宽度:200px;
高度:230px;
底部边缘:5雷姆;
右边距:25雷姆;
}
一些示例html


<div id=“textArea and button”>
全球金融服务基金<br>
全球金融服务基金<br>
全球金融服务基金<br>
</DIV>

<div id=“moreprovisions”style=“background:orange”>
<div class=“lead link simple”>
布拉
</DIV>
<div class=“lead link simple”>
布拉
</DIV>
<div class=“lead link simple”>
布拉
</DIV>
<div class=“lead link simple”>
布拉
</DIV>
</DIV>
有趣的是,如果我删除了.lead link simple,那么其中只有3个:


<div id=“MoreCommensions”style=“background:orange”>
<div class=“lead link simple”>
布拉
</DIV>
<div class=“lead link simple”>
布拉
</DIV>
<div class=“lead link simple”>
布拉
</DIV>
</DIV>
所以这个问题似乎是围绕着另一个事实展开的:/。

我摆弄代码已经有一段时间了,但我就是搞不清到底发生了什么。也许第二双眼睛可以?:)

下面是该问题的演示:http://ulternerds.co.uk/bug/test.html,然后当我从morecommensions中删除内容时,它看起来更好:


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

btw-我尝试为此设置了一个小提琴,但出于某种原因,它没有呈现SCSS(即使它已被选中)



这个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链接简单所以只有三个:

<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

顺便说一句-我试着为此设置一个小提琴,但出于某种原因,它没有渲染SCS(即使它被选中了)。