Масштаб преобразования CSS с колонкой flex-direction

Question

Я пытаюсь использовать CSS transform: scale(1.5); в гибком контейнере. Мне нужно, чтобы содержимое hidden отображалось выше и центрировалось по отношению к исходному тексту, поэтому для этого я использую flex-direction: column;, который работает.

Проблема заключается в том, что при выполнении transform увеличивается элемент html. (Вы можете увидеть поведение во фрагменте кода)

Я уверен, что упускаю что-то простое, но я пробовал несколько решений, не могу понять, почему это происходит. Любая помощь с благодарностью.

$(document).ready(function() {
  $('[data-action="clickable"]').mousedown(function(item) {
    $(item.currentTarget).addClass('flex-item-blowout');
    $(item.currentTarget).find('.hidden').addClass('displayed');
    $(item.currentTarget).find('.hidden').removeClass('hidden');
  });

  $('[data-action="clickable"]').mouseup(function(item) {
    $(item.currentTarget).removeClass('flex-item-blowout');
    $(item.currentTarget).find('.displayed').addClass('hidden');
    $(item.currentTarget).find('.displayed').removeClass('displayed');
  });

  $('[data-action="clickable"]').mouseleave(function(item) {
    $(item.currentTarget).removeClass('flex-item-blowout');
    $(item.currentTarget).find('.displayed').addClass('hidden');
    $(item.currentTarget).find('.displayed').removeClass('displayed');
  });
});

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  line-height: 30px;
}

.flex-item {
  background: burlywood;
  color: white;
  margin: 3px;
  font-weight: bold;
  font-size: 1.5em;
  min-width: 20%;
  max-width: 20%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  min-height: 50px;
  user-select: none;
}

.flex-item-blowout {
  transform: scale(1.5);
  background-color: coral;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <div class="flex-item" data-action="clickable">
    <span class="hidden">2</span><span>1 + 1</span>
  </div>
  <div class="flex-item" data-action="clickable">
    <span class="hidden">3</span><span>1 + 2</span>
  </div>
</div>

Answer 1

Просто добавьте align-items: flex-start к .flex-container, что предотвратит поведение по умолчанию значения stretch.

$(document).ready(function() {
  $('[data-action="clickable"]').mousedown(function(item) {
    $(item.currentTarget).addClass('flex-item-blowout');
    $(item.currentTarget).find('.hidden').addClass('displayed');
    $(item.currentTarget).find('.hidden').removeClass('hidden');
  });

  $('[data-action="clickable"]').mouseup(function(item) {
    $(item.currentTarget).removeClass('flex-item-blowout');
    $(item.currentTarget).find('.displayed').addClass('hidden');
    $(item.currentTarget).find('.displayed').removeClass('displayed');
  });

  $('[data-action="clickable"]').mouseleave(function(item) {
    $(item.currentTarget).removeClass('flex-item-blowout');
    $(item.currentTarget).find('.displayed').addClass('hidden');
    $(item.currentTarget).find('.displayed').removeClass('displayed');
  });
});

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  line-height: 30px;
  align-items: flex-start;
}

.flex-item {
  background: burlywood;
  color: white;
  margin: 3px;
  font-weight: bold;
  font-size: 1.5em;
  min-width: 20%;
  max-width: 20%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  min-height: 50px;
  user-select: none;
}

.flex-item-blowout {
  transform: scale(1.5);
  background-color: coral;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex-container">
  <div class="flex-item" data-action="clickable">
    <span class="hidden">2</span><span>1 + 1</span>
  </div>
  <div class="flex-item" data-action="clickable">
    <span class="hidden">3</span><span>1 + 2</span>
  </div>
</div>