Hexagon with 90deg rotate does not grow inside container - html

Question

I have the following problem with my hexagons. With the code below it works fine and the hexagon stays within its container.
.hexagon-2 .content {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
text-align: center;
}
.wrapper {
width: 100%;
/* This is the only value you need to change */
}
.container-2 {
position: relative;
width: 100%;
padding-bottom: 86.6%;
/* This sets the height of the div to 86% of its width */
border: 1px dashed green;
/* Just for demonstration purposes*/
transform: rotate(90deg);
}
.hexagon-2 {
position: absolute;
/* so .hexagon isn't pushed out of .container by the padding */
left: 25%;
width: 50%;
height: 100%;
margin: 0 auto;
/* center .hexagon inside .container*/
background-color: red;
/* color of the hexagon */
}
.hexagon-2:before,
.hexagon-2:after {
display: block;
position: absolute;
/* otherwise :after is below the hexagon */
top: 0;
content: '';
width: 100%;
height: 100%;
background-color: inherit;
}
.hexagon-2:before {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.hexagon-2:after {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="wrapper">
<div class="container-2">
<div class="hexagon-2">
<span class="content">Test test test</span>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="wrapper">
<div class="container-2">
<div class="hexagon-2">
<span class="content">Test test test</span>
</div>
</div>
</div>
</div>
</div>
</div>
As long as I leave the hexagon that way, it works exactly as it should. However, when I rotate the hexagon 90 degrees, it goes wrong.
When I add this line to the .container-2 class:
transform: rotate(90deg);
The hexagons behave like this:
Because of the rotate they no longer fill out the container. Is there a clean way to solve this. I have already tried everything with these hexagons but no luck so far.
Anybody got an idea that I can stil rotate the hexagon but that it stil fills out the container?
Thanks

Answer 1

Just off the top of my head looking at this the reason it's not filling out the container is because the width of the hexagon is different. If you want it to fill exactly the same size when it is rotating make sure point to point is the same width as flat edge to flat edge. I did a quick check and point to point is 310 pixels and flat edge to flat edge is 263 pixels. Hope this helps.