Displayed here is a simplified Bootstrap 3 layout. The middle column in the row features an inline SVG that transitions from a blue box to a green box.
I've opted for styling SVG with browser CSS because I find it interesting! Additionally, this approach saves me from creating multiple PNGs for various row heights and color combinations where this design element might be applied.
Although I could use JavaScript to dynamically adjust the height of the col-* divs based on the tallest non-SVG-containing one, I believe there should be a CSS solution to achieve the same result.
It's worth noting that I experimented with setting display: flex for the .row element (currently commented out in the stylesheet). While this does ensure equal column heights, it expands content divs instead of shrinking the styled one.
In case you prefer working with Plunker over a StackOverflow snippet like I do, I have included a link to this Plunker.
HTML, body.stackoverflow-snippet {
color: white;
font-size: 25px;
height: 100%;
}
.row {
/*
* Here, the following rule would help ensure equal column
* heights, but the issue becomes less apparent with dynamic content.
*/
/* display: flex; */
}
.row.desired-result div {
/*
* Set any known value for height to see the desired effect. In my case,
* I can't explicitly set the height of these divs since user-generated
* content fills them and may change their height.
*/
height: 35px;
}
.row .rounded {
padding-left: 0;
}
.blue {
background: blue;
}
.green {
background: green;
}
svg {
height: 100%;
}
svg circle {
fill: blue;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="stackoverflow-snippet">
<div class="container-fluid">
<!-- first row: desired result -->
<div class="row desired-result">
<div class="blue col-xs-6">Desired result</div>
<div class="green rounded col-xs-1">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
<circle r="50" cy="50" cx="50"></circle>
</svg>
</div>
<div class="green col-xs-5">(explicit height)</div>
</div>
<!-- second row: just a visual break to separate the rows of interest -->
<div class="row">
<div class="col-xs-12"> </div>
</div>
<!-- third row: natural height -->
<div class="row">
<div class="blue col-xs-6">Ack!</div>
<div class="green rounded col-xs-1">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="inline-svg inlined-svg" viewBox="90 20 10 60" role="img">
<circle r="50" cy="50" cx="50"></circle>
</svg>
</div>
<div class="green col-xs-5">(natural height)</div>
</div>
</div>
</body>
</html>