Element: before same height as parent without position: absolute

user_10011541 0
Viewed 35

I'm trying to add a custom text layout in a div by using shape-outside and clip-path. It does work as intended except one thing - parent height is not fixed so .my-div:before should automatically adapt to parent .my-div .

Is there a way to do it without using position:absolute on :before element? If I use position:absolute then text in .my-div ignores the shape. If I add fixed height to before element then overflow:hidden is ignored and fixed height might not fit the div.

Any suggestions?

.my-div  {
  width: 100%;
  height: 100%;
  text-align: justify;
  position: relative;
  overflow:hidden;
}

.my-div:before {
dispaly:block;
  content:"";
  float:right;
  width: 200px;
  height: 350px; <!-- want to get rid of that height, and somehow use 100% height of .my-div without using position:absolute; OR set height to large number but somehow hide everything what's higher than parent -->
  background: #eee;
  shape-outside: polygon(100% 0%, 83% 1%, 86% 9%, 91% 13%, 81% 20%, 87% 30%, 91% 37%, 82% 40%, 70% 48%, 85% 58%, 92% 64%, 81% 66%, 74% 71%, 87% 73%, 91% 82%, 84% 83%, 71% 89%, 89% 93%, 91% 99%, 100% 99%);
  clip-path: polygon(100% 0%, 83% 1%, 86% 9%, 91% 13%, 81% 20%, 87% 30%, 91% 37%, 82% 40%, 70% 48%, 85% 58%, 92% 64%, 81% 66%, 74% 71%, 87% 73%, 91% 82%, 84% 83%, 71% 89%, 89% 93%, 91% 99%, 100% 99%);
}

how to looks like now

clip-path css html
1 Answers

Flexbox can help your here.

Resize the below to see the result:

.wrapper {
  display: flex; /* this will allow you to use height:100% */
  /* to debug, can be removed*/
  resize: horizontal;
  overflow: hidden;
  border:1px solid;
  /**/
}
.my-div  {
  text-align: justify;
  font-size: 30px;
  margin: 0;
}

.my-div:before {
  content :"";
  float: right;
  width: 200px;
  height: 100%; /* here */
  background: #eee;
  --shape:polygon(100% 0%, 83% 1%, 86% 9%, 91% 13%, 81% 20%, 87% 30%, 91% 37%, 82% 40%, 70% 48%, 85% 58%, 92% 64%, 81% 66%, 74% 71%, 87% 73%, 91% 82%, 84% 83%, 71% 89%, 89% 93%, 91% 99%, 100% 99%);
  shape-outside: var(--shape);
  clip-path: var(--shape);
}
<div class="wrapper">
  <p class="my-div">
    Pie icing jelly-o chocolate donut tootsie roll jelly-o tart chupa chups. Jujubes fruitcake lemon drops muffin gummi bears sweet marshmallow tootsie roll jelly beans. Tart chupa chups chocolate sesame snaps sweet halvah. Sugar plum gummi bears cake cupcake jelly cake lemon drops marzipan. Marshmallow cotton candy wafer apple pie gummi bears gummi bears toffee gummies carrot cake.
  </p>
</div>

More detail: https://css-tricks.com/float-an-element-to-the-bottom-corner/

user_86203330
Related