Why doesn't the paragraph element overflow everything including the body

30 views Asked by At

Hi so I've made a circle image and a paragraph page but for some reason the paragraph element overflows through everything including it's parent and the body element. Does anyone know why this happens?

Explanation for being a "duplicate" question

This is not a duplicate question in my opinion because the other question's (which supposedly is the same as this one) answer doesn't include tranform: scale(0.5);. But I need scaling for my own image. I don't use lorem picsum images in my real project. But If you check the other question's answer, whilst it is correct, when I scale it down, it causes the entire element to scale down but the I only need the image to scale down. If you add the code transform: scale(0.5); to the other question, you'll see it'll just look out of shape. So I think this question need to be reopened because of the fact that it is not a duplicate. And I don't understand the relation between these two questions. One is about the text not being aligned but this question is about the text overflowing.

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
  width: 100vw;
  height: 3000px;
  font-family: Roboto, Arial;
  margin: 0;
}

img.boat-main {
  float: left;
  object-fit: cover;
  width: 116vw;
  height: 116vw;
  transform: translate(-25%, -25%) scale(0.5);
  object-position: center -150px;
  shape-outside: circle(53% at 0 0);
  border-bottom-right-radius: 100%;
}


.boat-main-description {
  width: 100%;
}
        <img src="https://picsum.photos/900/1600" class="boat-main">

        <div class="boat-main-description">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper non lacus at pellentesque. Proin leo sapien, placerat id ultrices et, gravida sit amet quam. Cras pretium, augue id dapibus viverra, risus erat sagittis quam, vitae placerat augue lacus in nulla. Maecenas rutrum hendrerit arcu. Cras eleifend malesuada imperdiet. Duis pharetra est et tempor lacinia. Vivamus ex mauris, viverra eu posuere eu, finibus non ante. Nullam tristique nisl a velit interdum, in ornare nulla convallis. Suspendisse odio dui, vestibulum id diam non, blandit efficitur odio. Proin facilisis magna non justo semper, ut finibus tellus volutpat. Pellentesque lobortis felis eget faucibus tempor. Nullam eleifend quam vel turpis eleifend efficitur. Nulla sollicitudin ultricies augue nec luctus.
          </p>
        </div>

0

There are 0 answers