Растянуть SVG, чтобы соответствовать 100% высоты и ширины его родителя

Question

(решено - см. Решение по ссылке на коде) Я пытаюсь использовать изображение SVG в качестве фона, который всегда будет растягиваться до 100% от родительского div. Уже пробовал:

• Использовать как фоновое изображение CSS и устанавливать размер фона: 100% 100%.
• Поместите абсолютное значение в родительский div и установите высоту: 100%.
• preserveAspectRatio = "xMaxYMax".
• , даже если я вручную изменяю viewBox, он не работает.
• пробовал все связанные с этим вопросы, которые я нашел здесь - Растянуть фоновое изображение SVG? , Автоматически масштабировать SVG для его родителя , Подогнать / растянуть SVG для разделения фона без повторного масштабирования

Чтобы лучше понять, что я хочу, перейдите по этой ссылке: http://185.127.16.178/~amen/%D7%90%D7%95%D7%91%D7%97%D7%A0%D7%AA-%D7%9C%D7%90%D7%97%D7%A8%D7%95%D7%A0%D7%94/
В этом зеленом пузыре длина текста может изменяться, поэтому мне нужно, чтобы SVG растягивался, когда добавлялось больше текста, а div увеличивался.

Я также создал маленькую ручку -

.svg-container {
  height: 400px;
  width: 200px;
  border: 1px solid red;
  position: relative;
}

#small_bubble {
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.cls-1 {
  fill: transparent;
  stroke: green;
  stroke-miterlimit: 3;
  stroke-width: 3px;
}

.e-poa {
  position: absolute;
}

e-por {
  position: relative;
}

<div class="svg-container">
  <svg id="small_bubble" class="e-poa" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.92 272.85" preserveAspectRatio="xMaxYMax">
      <path class="cls-1" preserveAspectRatio="xMaxYMax" d="M301.52,1.57,8.37,19.53A7.87,7.87,0,0,0,1.5,27.34V214.76a7.89,7.89,0,0,0,7.12,7.85l46.67,4.53-7.14,42.78,63-37.35,190.58,18.51a7.88,7.88,0,0,0,8.65-7.85V9.38A7.88,7.88,0,0,0,301.52,1.57Z"/>
     </svg>
</div>

Решение можно увидеть здесь (Решено - @Furkan Poyraz): https://codepen.io/ncamaa/pen/JZzeQM

Answer 1

Если вы открыты для другой альтернативы, вы можете создать фигуру с помощью чистого CSS. Он не будет аккуратным, как SVG, но будет отзывчивым:

* {
 box-sizing:border-box;
}

.box {
 margin:40px;
 padding:0 10px;
 max-width:200px;
 display:inline-block;
 vertical-align:top;
 border-right:2px solid green;
 border-left:2px solid green;
 position:relative;
}
.box:before {
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  bottom:calc(100% - 40px);
  height:50px;
  border:2px solid green;
  border-bottom:0;
  border-radius:5px 5px 0 0;
  transform:skewY(-5deg);
  transform-origin:left bottom;
}
.box .b {
  position:absolute;
  left:-2px;
  right:-2px;
  top:calc(100% - 40px);
  height:50px;
  border:2px solid green;
  border-top:0;
  border-radius:0 0 5px 5px;
  transform:skewY(5deg);
  transform-origin:left top;
}
.box .b:before {
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  top:calc(100% - 15px);
  left:40px;
  border-left:2px solid green;
  border-bottom:2px solid green;
  transform:skewY(-45deg);
}
.box .b:after {
  content:"";
  position:absolute;
  width:27px;
  height:4px;
  top:calc(100% - 1px);
  background:#fff;
  left:42px;
}
.box p {
  margin:0;
}

<div class="box">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus. Ut viverra felis nec pretium accumsan. Sed eu ante id augue placerat pellentesque eget at nibh. Quisque pharetra nisi et suscipit eleifend</p>
<span class="b"></span>
</div>
<div class="box">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.</p>
<span class="b"></span>
</div>
<div class="box" style="max-width:300px;">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus. In posuere arcu id metus tincidunt, in eleifend nisl dapibus.</p>
<span class="b"></span>
</div>
<div class="box" style="max-width:350px;">
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. Duis est lorem, ultricies vel iaculis id, accumsan quis risus.</p>
<span class="b"></span>
</div>