直列柔性谷歌浏览器不工作

Question

看到这个codepen：https://codepen.io/anon/pen/jBjZGx

在Firefox：

然后在Chrome：

我不知道是什么导致了这一点。我尝试删除垂直标题，但空的空间仍然存在。

下面是代码：

section{ 
 
    width: 1000px; 
 
    height: 200px; 
 
    white-space: nowrap; 
 
    background: yellow; 
 
    border: 1px solid green; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    z-index: 1; 
 
} 
 
a{ 
 
    display: inline-flex; 
 
    min-width: calc(2 * 1cm); 
 
    width:100%; 
 
    height:100%; 
 
    overflow: hidden; 
 
    border-left: .2rem solid #282323; 
 
    border-right: .2rem solid #282323; 
 
    box-sizing: border-box; 
 
    color: currentcolor; 
 
    position: relative; 
 
    scroll-snap-align: center none; 
 
    text-decoration: none; 
 
    transition: box-shadow .5s,transform 1s; 
 
} 
 
a:first-child{ 
 
    background: red; 
 
    justify-content: flex-end; 
 
} 
 
a:last-child{ 
 
    background: orange; 
 
} 
 
.flex{ 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<section> 
 
    <a> 
 
    <p> 
 
     
 
    </p> 
 
    
 
    <h3 class="flex"> 
 
     <div> 
 
     T 
 
     </div> 
 
     <div> 
 
     i 
 
     </div> 
 
     <div> 
 
     t 
 
     </div> 
 
     <div> 
 
     t 
 
     </div> 
 
     <div> 
 
     l 
 
     </div> 
 
     <div> 
 
     e 
 
     </div> 
 
    </h3> 
 
    </a><a> 
 
    <p> 
 
     don't click! 
 
     link link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbb 
 
     link link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbb 
 
    </p> 
 
    </a> 
 
</section>

Answer 1

添加vertical-align: top;到您的锚标记。好像你必须明确地在Chrome

片段设置为低于

section { 
 
    width: 1000px; 
 
    height: 200px; 
 
    white-space: nowrap; 
 
    background: yellow; 
 
    border: 1px solid green; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 
    z-index: 1; 
 
} 
 

 
a { 
 
    display: inline-flex; 
 
    min-width: calc(2 * 1cm); 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    border-left: .2rem solid #282323; 
 
    border-right: .2rem solid #282323; 
 
    box-sizing: border-box; 
 
    color: currentcolor; 
 
    position: relative; 
 
    scroll-snap-align: center none; 
 
    text-decoration: none; 
 
    transition: box-shadow .5s, transform 1s; 
 
    vertical-align: top; 
 
} 
 

 
a:first-child { 
 
    background: red; 
 
    justify-content: flex-end; 
 
} 
 

 
a:last-child { 
 
    background: orange; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
section{ 
 
    font-size:0 
 
} 
 
section * { 
 
    font-size:initial 
 
}

<section> 
 
    <a> 
 
    <p> 
 

 
    </p> 
 

 
    <h3 class="flex"> 
 
     <div> 
 
     T 
 
     </div> 
 
     <div> 
 
     i 
 
     </div> 
 
     <div> 
 
     t 
 
     </div> 
 
     <div> 
 
     t 
 
     </div> 
 
     <div> 
 
     l 
 
     </div> 
 
     <div> 
 
     e 
 
     </div> 
 
    </h3> 
 
    </a> 
 
    <a> 
 
    <p> 
 
     don't click! link link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink 
 
     link link link link your asss to the bbbbblink link link link link your asss to the bbbbb link link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link link link your asss to the bbbbblink link link 
 
     link link your asss to the bbbbblink link link link link your asss to the bbbbb 
 
    </p> 
 
    </a> 
 
</section>

这个值