The problem with your image is that the green box is first rotated then stretched. With no rotation, this gives the correct rectangle, but then it fails.
Anyway, I don't think you understood clearly how the algorithm works. The algorithm consists to check whether the projection on an axis of the two shapes intersects, for each axis of a nicely selected set of axes. The set of axis consist of the line going through the normal at each face, i.e. a line perpendicular to each face. Luckily in the case of boxes, it implies only two lines per shapes since sides are parallel by twos.
In the following picture, there are two boxes, in yellow and orange. Every axis is depicted by a black line.
![One orange box and one yellow box both with their normal axes][1]
Consider the projection on the slightly dipping axis. Its projection in the orange segment of the line. The segment was obtained by orthogonally projecting the vertices of the orange box (i.e. its corners) onto the line. They are obtained by intersecting the axis with the blue dashed lines, each one of which is a perpendicular of the axis going through a rectangle vertex.
The projection of the yellow box on one of its axis is trivial ; it is the dark yellow segment of the axis. You then have to check whether the two segments intersects. If they don't, the box don't intersect either, if they do, you have to check along another axis. If on each axis, the projection of the boxes intersect, then the two shapes intersects.
There's an optimization doable here : check that the projected vertices are either all on the left of the left side of the yellow box or all on the right of its right side. If they do, the projected segments do not intersect. Else they do intersect.
Note : Since each shapes has only two axes those axis may serve as a reference system for the plane. Consider the system generated by the yellow box, I shall call it the “yellow system”. Then each segments obtained by projecting the orange box on each yellow axis corresponds to the sides the axis-aligned bounding box (AABB) of the orange box in the yellow system. In the picture that I remind below, this AABB is reprensented by a dotted rectangle boundary. See how the projected segment correspond to a translation of some sides of the AABB.
![The dotted green box is the AABB of the orange box in the yellow's box reference system][1]
Maybe building this AABB was what you were trying to compute. But to compute it nicely, you have to compute the projected segment first anyway, so there is no gain to explicity compute AABBs. In any case, I can't understand how such an AABB can be a rectangle when using two squares with the same orientation. [1]: https://i.sstatic.net/eomug.png