Inline-flex 在 Google Chrome 中不起作用

Question

查看此代码笔：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>