CSS Shape-Outside pushes text out of border-box only in Chrome

Question

I am using shape-outside (boundary) and clip-path (content) to have a "triangle" with text on top of a photo.

Safari and Firefox both work almost the same, but Chrome behaves strange (or perhaps right?). The text is shifted outside the box and always is pushed till the edge of the viewport. I can't define any margin or padding to them.

Screenshot shows Safari on the top/left window with correct margin and text within the orange box (H1 and P). Chrome however lets the text break out of their boxes and only stops at the very end.

Here is the code, simplified and trimmed to the bare minimum:

https://codepen.io/suntrop/pen/RwVMvzo

<section>
  <div class="boundary"></div>
  <div class="content">
    <h1>Chrome: Headline reaches the viewport edge on the right, but should fit/break inside the orange box. Safari and Firefox behave expected and text stays inside the ornage box</h1> 
    <p>This text breaks out of the orange box (only in Chrome). Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi inventore ut dolor voluptatem reprehenderit sapiente et molestiae officiis nesciunt repudiandae vel quia itaque, error fugiat dolores distinctio pariatur optio! Tempore!</p>
  </div>
</section>
<style>
section {
  border: 2px dotted blue;
  height: 100vh;
  background: url(https://picsum.photos/1500/1000) no-repeat 0 0;
  background-size: cover;
}

.boundary {
  width: 100vw;
  height: 100vh;
  float: left;
  shape-outside: polygon(0 0, 70% 0, 20% 100%);
  /*background: blue;*/
}
.content {
  height: 100vh;
  background-color: rgba(255, 255, 255, .9);
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 20% 100%);
  border: 1px solid red;
}

h1, p {
  margin-top: 100px;
  margin-right: 100px;
  border: 1px solid orange;
}
h1 {
  text-align: right;
}
</style>

If you strip down the headline, you see there is enough space, but still it sits at the far right.

Answer 1

Try this solution, i don't have safari, but in firefox and chrome works. For .boundary added width: 70% that fix body overflow.

RESET CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

CLASS WITH CHANGES

.boundary {
  width: 70%; /* changed */ 
  height: 100vh;
  float: left;
  shape-outside: polygon(0 0, 100% 0, 30% 100%, 0 100%); /* changed */ 
  /*background: blue;*/
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
section {
  border: 2px dotted blue;
  height: 100vh;
  background: url(https://picsum.photos/1500/1000) no-repeat 0 0;
  background-size: cover;
}
.boundary {
  width: 70%; /* changed */ 
  height: 100vh;
  float: left;
  shape-outside: polygon(0 0, 100% 0, 30% 100%, 0 100%); /* chenged */ 
  /*background: blue;*/
}
.content {
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.9);
  clip-path: polygon(70% 0, 100% 0, 100% 100%, 20% 100%);
  border: 1px solid red;
}

h1,
p {
  margin-top: 100px;
  margin-right: 100px;
  border: 1px solid orange;
}
h1 {
  text-align: right;
}

<section>
  <div class="boundary"></div>
  <div class="content">
    <h1>Chrome: Headline reaches the viewport edge on the right, but should fit/break inside the orange box. Safari and Firefox behave expected and text stays inside the ornage box</h1>
    <p>This text breaks out of the orange box (only in Chrome). Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi inventore ut dolor voluptatem reprehenderit sapiente et molestiae officiis nesciunt repudiandae vel quia itaque, error fugiat dolores
      distinctio pariatur optio! Tempore!</p>
  </div>
</section>