flex display ignores scale transform of content

Question

I use a container with display: flex and scaling to the width of the website. The content of the container are several links inside div-elements with a transform:scale(1.5,1) for aesthetical reasons. However the flexbox seems to ignore the scaling of the CSS transform and when they get to big they just overlap and also won't wrap around lines (even with set flex-wrap: wrap). Example:

#flexbox-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  height: 100px;
  width: 400px;
  border: 1px solid black;
}

.inner-content {
  transform-origin: left;
  transform: scale(1.5, 1);
  background: grey;
  border: 1px solid red;
  height: 98px;
  width: 98px;
  /* 98px since the border gets added around resulting in 100px */
  opacity: 0.5;
}

<div id="flexbox-container">
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
</div>

Does someone maybe know a trick how to get the flexbox calculate with the transformed sizes?

Answer 1

I was able to solve my problem by adopting an answer in CSS image resize percentage of itself?.

I use a hidden version of the text with scaled up font size (this requires that you know the current font size and multiply it by your transform scale) for the size of the flex element. The actual tranformed element gets position:absolute and positioned at left:0. This is the result:

#flexbox-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 250px;
  
  border: 1px solid black;
}

.inner-content {
  position: relative;

  background: grey;
  border: 1px solid red;
  opacity: 0.5;
}

.inner-content .fake {
  float: left;
  visibility: hidden;
  width: auto;
  font-size: 1.67rem;
  height: 1.5ex;
}

.inner-content .span_wrap {
  position: absolute;
  left: 0;
  display: inline-block;
  transform-origin: left;
  transform: scale(1.67, 1);
}

<div id="flexbox-container">
  <div class="inner-content">
    <span class="fake">
      Lorem
    </span>
    <div class="span_wrap">
      Lorem
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      ipsum
    </span>
    <div class="span_wrap">
      ipsum
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      dolor
    </span>
    <div class="span_wrap">
      dolor
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      sit
    </span>
    <div class="span_wrap">
      sit
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      amet
    </span>
    <div class="span_wrap">
      amet
    </div>
  </div>
</div>