直列柔性谷歌瀏覽器不工作

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>

這個值