Элемент: до той же высоты, что и родитель, без позиции: абсолютная

Я пытаюсь добавить собственный макет текста в div, используя shape-outside и clip-path. Он работает по назначению, за исключением одного: высота родителя не фиксирована, поэтому .my-div:before должен автоматически адаптироваться к родительскому .my-div .

Есть ли способ сделать это без использования position:absolute для элемента :before? Если я использую position:absolute, тогда текст в .my-div игнорирует форму. Если я добавлю фиксированную высоту к элементу перед, тогда переполнение: скрытый будет проигнорирован, и фиксированная высота может не соответствовать div.

Какие-либо предложения?

.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%);
}

Элемент: до той же высоты, что и родитель, без позиции: абсолютная

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Flexbox может помочь вам здесь.

Измените размер ниже, чтобы увидеть результат:

.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>

Подробнее: https://css-tricks.com/float-an-element-to-the-bottom-corner/

Другие вопросы по теме