Почему маржинальная обработка и поведение после отрыва отличаются между элементами Chrome и Firefox Flex?

Question

У меня есть код, как показано ниже.Я добавил к нему код и попытался выложить элементы flex.

• Скриншот Firefox: В этом случае Firefox и Chrome работают одинаково *

• Снимок экрана Chrome: В этом случае Firefox и Chrome работают одинаково

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>

---

Q1. Поэтому я использовал свойство margin.Это работало в Firefox, но в Chrome было только поле для margin, и отображалась полоса прокрутки.

Я хочу подавить это, но я не знаю, как это сделать.В чем заключается ошибка Firefox или Chrome?

• Скриншот Firefox: В этом случае Firefox работает так, как мне хочется.

• Снимок экрана Chrome: Но в отличие от Firefox, Chrome работает не так, как вам хочется! (Полоса прокрутки)

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>

---

Q2. Далее я попытался использовать такое свойство break-after.Это работало в Firefox, но не в Chrome.

Добавление префикса вендора в свойство break-after не изменило ситуацию.Что это за ошибка, Firefox или Chrome?И как я могу это подавить?

• Скриншот Firefox: Даже в этом случае Firefox работает так, как я хочу.

• Скриншот Chrome: Но в отличие от Firefox, Chrome не работает так, как вам хочется!

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 показывают разные результаты разметки флекс?
• разрыв страницы после не работает во флексбоксах
• Какуказать разрывы строк в многострочном макете flexbox?