Question

我有如下代码。我向其中添加了代码，并尝试布置弹性项目。

Firefox屏幕截图： In this case, Firefox and Chrome work the same way
Chrome屏幕截图： In this case, Firefox and Chrome work the same way

html,
body,
.parent {
  height: 100%;
}

body {
  background: tomato;
  margin: 0;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}

.child {
  width: 30%;
  height: 200px;
  background: blue;
}

<div class="parent">
  <div class="child"> </div>
  <div class="child"> </div>
</div>

第一季度。 因此，我使用了margin属性。这在Firefox中有效，但在Chrome中，margin仅有一个空白，并显示了滚动条。

我想隐瞒这个，但是我不知道该怎么做。 Firefox或Chrome的错误是什么？

Firefox屏幕截图： In this case, Firefox works as I wish.
Chrome屏幕截图： But unlike Firefox, Chrome does not work as you wish!(scrollbar)

html,
body,
.parent {
  height: 100%;
}

body {
  background: tomato;
  margin: 0;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}

.child {
  width: 30%;
  height: 200px;
  background: blue;
  flex: none;
  margin: 50% 10px;
}

<div class="parent">
  <div class="child"> </div>
  <div class="child"> </div>
</div>

第二季度。 接下来，我尝试使用这样的break-after属性。这适用于Firefox，但不适用于Chrome。

在break-after属性中添加供应商前缀不会改变这种情况。 Firefox或Chrome是哪个错误？而我该如何抑制呢？

Firefox屏幕截图： Even in this case, Firefox works as I wish.
Chrome屏幕截图： But unlike Firefox, Chrome does not work as you wish!

html,
body,
.parent {
  height: 100%;
}

body {
  background: tomato;
  margin: 0;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}

.child {
  width: 30%;
  height: 200px;
  background: blue;
  break-after: always;
}

<div class="parent">
  <div class="child"> </div>
  <div class="child"> </div>
</div>

我看到了以下现有问题，但是没有一个可以解决仅Chrome会损坏的问题。

为什么chrome和firefox flex项目之间的边距和追尾行为不同？

0 个答案: