宽度取决于子元素的宽度和内容高度

Question

我想创建一个有角度的文本流，其中文本行的宽度是已知值

--w

。到目前为止，我所拥有的是以下代码：

* { margin: 0 }

html, body { display: grid }

body {
  --w: min(35em, 65vw);
  --f: 1/ 8;
  background: linear-gradient(90deg, transparent var(--w), pink 0);
  font: 1em ubuntu, sans-serif
}

.outer-wrapper {
  width: min-content;
  box-shadow: 0 0 0 2px red;
  background: lemonchiffon
}

span::before, span::after {
  --i: 0;
  --j: calc(1 - var(--i));
  --g: 
    linear-gradient(to right bottom, 
        hsla(50, 50%, 50%, var(--j)) 50%, 
        hsla(50, 50%, 50%, var(--i)) 0);
  float: left;
  height: 100%;
  aspect-ratio: var(--f);
  background: var(--g);
  shape-outside: var(--g);
  content: ''
}
span::after {
  --i: 1;
  float: right
}

.inner-wrapper {
  width: var(--w);
  box-shadow: inset 0 0 0 2px blue
}

<div class="outer-wrapper">
  <span aria-hidden="true"></span>
  <div class="inner-wrapper">
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
  </div>
</div>

问题是，我希望两侧的浮动伪造物增加

--w

宽度并使

.outer-wrapper

变宽一个宽度，否则，文本会溢出红色轮廓框。

我不知道如何用 CSS 做到这一点。我知道 JS 是可能的，我有一个工作版本，我读取了

px

值的高度，将它存储在一个变量中，在调整大小时更新它并从那里计算所有内容。但我真的很想只用 CSS 来做。

在这种情况下倾斜盒子不是一个有用的解决方案。