Настроенное с помощью Google Chrome направление расширения с помощью flexbox

В Google Chrome существует проблема, связанная с тем, что элементы растягиваются/сжимаются в разных направлениях относительно области просмотра при помещении внутрь контейнера flexbox с соседним элементом flex, имеющим содержимое с space-between или по center.

Это не проблема в Firefox, IE11, Edge или Safari, поскольку элементы всегда расширяются вниз.

Мне любопытно:

• Поведение Chrome здесь соответствует какой-то спецификации? Если да, то какой?
• Если нет, то почему это было сделано в Chrome? (ИМХО, это ужасный UX для случайного исчезновения триггера клика.)
• Можно ли каким-либо образом изменить или отключить поведение Chrome? Например. через CSS или метатег?

Обновление 1: я подал проблему # 739860 на Chrome Chrome Tracker, ища понимание/объяснение от разработчиков Chromium, если это возможно.

---

Вот два примера, вставленных ниже. Полный набор тестов, описывающих проблему, можно найти в этой ручке: https://codepen.io/jameswilson/full/xrpRPg/ Я решил использовать slideToggle в этом примере, чтобы движение развернуть/свернуть было анимированным и видимым для глаз. То же самое происходит с тегом details, но кросс-браузерной поддержки пока нет, а развернуть/свернуть слишком сложно.

Пример 1: поведение Chrome для разворачивания/свертывания для оправданного промежутка между флексбоксами

$('button').click(function() {
  $(this).next().slideToggle();
})

body {
  margin: 30px;
  font-family: sans-serif;
}
aside,
aside div,
summary,
main,
button,
details p,
button + p {
  background: rgba(0,0,0,.09);
  border: none;
  padding: 20px;
  margin: 0;
}

.flexcontainer {
  display: flex;
}
aside {
  flex: 1;
  position: relative;
  max-width: 25%;
  background: mintcream;

  display: flex;
  flex-direction: column;
  position: relative;
}
aside.space-between {
  justify-content: space-between;
}
aside.center {
  justify-content: center;
}

main {
  flex: 3;
  position: relative;
  max-width: 75%;
  background: aliceblue;
  vertical-align: top;
  height: 100%;
}
main > * + * {
  margin-top: 20px;
}

button + p {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="flexcontainer">
  <aside class="space-between">
    <div>Top Sidebar</div>
    <div>Bottom Sidebar</div>
  </aside>
  <main>
    <div>
      <button>slideToggle</button>
      <p>Other browsers: always expands downward.<br>
        Chrome: Should always expand downward because Top Sidebar is always visible.</p>
    </div>

    <div>
      <button>slideToggle (usually expands down)</button>
      <p>Other browsers: always expands downward.<br>
        Chrome: Should expand downward while Bottom Sidebar and Top Sidebar are both visible. But will expand upward if you scroll down far enough so that Top Sidebar is off-screen.</p>
    </div>
    
    <div>
      <button>slideToggle (usually expands down)</button>
      <p>Other browsers: always expands downward.<br>
        Chrome: Should expand downward while Bottom Sidebar and Top Sidebar are both visible. But will expand upward if you scroll down far enough so that Top Sidebar is off-screen.</p>
    </div>
  </main>
</section>