0

First, English is not my home language, so i apologize for any mistakes or typos.

I am trying to build an isometric grid for one of my personal projects, however i encounter a problem.

(for all the following screenshots, i removed the rotation of the grid to ease comprehension)

The setting:

My grid is generated using flex and html. I will position some elements at selected squares using links with a background-image

example of a part of the grid with an element

and here is an example of the html

<div class="town-map-container" style="background-color: green;">
    ...
    <div class="town-row" style="order: X;">
        ...
        <div class="town-square" style="order: Y;">
            <a class="building-img" href="#available-modal-X-Y" style="background-image:url("");"></a>
        </div>
        ...
    </div>
    ...
</div>

and the related css:

.town-map-container {
  height: 1920px;
  width: 1920px;
  //transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);

  .town-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 5%;

    .town-square {
      height: 100%;
      width: 5%;
      border: 1px ridge black;

      .building-img {
        display: inline-block;
        min-height: 100%;
        width: 100%;
        position: relative;
        left: 0;
        bottom: 0;
        //transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .building-img:hover {
        border-color: blue;
        box-shadow: 0 0 10px blue;
      }
    }
  }
}

And now to the question:

I would like for the child element to overflow from the right and the top of the square. however, while increasing the width of the element overflow it from the right, increasing his height overflows it from the bottom.

enter image description here

(here I increased both height and width to 120%)

I tried a few options (position: relative; botom: 0; left: 0;, ...) but i am first a backend developer and it seems I cannot think about (or google) a solution, any ideas ?

Thanks in advance.

Elvandar
  • 71
  • 5
  • 1
    Check this out, hope it helps. https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css – TechnicalTophat Jan 16 '22 at 11:22
  • Hello Thanks for the link, while i did not use the accepted response (too difficult to reproduce for every square of my grid) however, i used the discussions to think and i went to the solution of a negative margin-top with the appropriate height (-10% margin top + 11% height for example) – Elvandar Jan 17 '22 at 07:02
  • please add this as an answer for future searches – TechnicalTophat Jan 25 '22 at 21:11

0 Answers0