Question

我找到了一个错误的简单演示。里面有一个flex div和一些图片。

div和图像的大小是未知的，我只是为了表示问题而设置一些固定值。

问题是图像在FF中没有溢出div的宽度，但它们在Chrome中会出现（预期和期望的行为）。

主要目标是只显示3张图像（每张图像的div宽度为33.3333％），即使图像超过3张也是如此。

演示：http://codepen.io/alexandernst/pen/mPoeLP

HTML：

<div class="wrapper">
  <img class="box" src="http://placehold.it/150x150">
  <img class="box" src="http://placehold.it/150x150">
  <img class="box" src="http://placehold.it/150x150">
  <img class="box" src="http://placehold.it/150x150">
  <img class="box" src="http://placehold.it/150x150">
</div>

CSS：

.wrapper {
  border: 1px solid red;
  width: 400px;
  height: 200px;
  display: flex;
  overflow: hidden;
}

.box {
  border: 1px solid green;
  max-width: 33.33333%;
  position: relative;
  padding-right: 10px;
  align-self: center;
}

Answer 1

我建议将每个图片包装在div中，然后使用.box类来代替。

似乎可以在Chrome 51 + FF 46中使用

＆＃13;

* {
  box-sizing: border-box;
}
.wrapper {
  border: 1px solid red;
  width: 400px;
  height: 200px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.box {
  border: 1px solid green;
  flex: 0 0 33.33333%;
  position: relative;
  padding-right: 10px;
}
.box img {
  width: 100%;
  height: auto;
  display: block;
}

＆＃13;

<div class="wrapper">
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="box">
    <img src="http://placehold.it/150x150">
  </div>
</div>

＆＃13;

Answer 2

这是因为你有padding-right。尝试添加box-sizing : border-box;：

.box {
  border: 1px solid green;
  max-width: 33.33333%;
  box-sizing: border-box;
  position: relative;
  padding-right: 10px;
  align-self: center;
}

box-sizing将在计算中使用padding。

Updated codepen

溢出使用flex div无法在FF中工作

2 个答案: