One flex/grid item sets the size limit for siblings

I have this JSFiddle: https://jsfiddle.net/jamesdaniels_passle/xcyL4jne/3/

I’m trying to get the svg’s size to respond to the adjacent text, but I’m struggling to work it out.

I want the height of the curly-brace/SVG to match the height of the text.

<div class="container">
  <svg viewBox="0 0 5 18">
    <text x="-2" y="12" font-family="'Goudy Bookletter 1911', serif">       {
    </text>
  </svg>
  <div class="text-container">
    Etiam feugiat lorem non metus.Morbi vestibulum volutpat enim. Sed libero. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Etiam feugiat lorem non metus.Morbi vestibulum volutpat enim. Sed libero. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula.
  </div>
</div>

CSS:

div.container {
  background-color: palegoldenrod;
  display: flex;
  align-items: center;
}

svg {
  background-color: palegreen;
  
}

div.text-container {
  
}

You need to sign in to view this answers

Related Post