This question refers to the situation shown in this [jsFiddle](http://jsfiddle.net/P9pq7/).

As you can see, currently, the `div` (aka `.svg-container`; orange background) that contains the `svg` elements (white background) is about 70px wider than it needs to be. Can I get this div to "shrink-to-fit" its contents using *no* JS?

EDIT: Just to be clear, the shape and positioning of the remaining elements should remain unaffected by the change. The only thing that should change is the shape `.svg-container`, and this should be in a way that the orange fringe along its right side has the same width as it has along the three other sides. The final result should *look* like [this](http://jsfiddle.net/eerLa/). (Of course, to produce this second jsFiddle, I had to explicitly set the width of `.svg-container`, which is not the kind of solution I'm looking for. I'm looking for the CSS that would translate into "extend beyond content's right edge the same amount as that beyond other three edges.")

---

And now, the obligatory source code:

```
*{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
  margin:0;
  font-family:consolas,monaco,courier,monospace;
}

.centered{
  max-width:280px;
  background-color:red;
  padding:15px;
  margin:0 auto;
}
.content{
  width:100%;
  color:#8f8;
  background-color:#333;
}
table td:first-child{
  width:75px;
}
.svg-container{
  line-height:0;
  background-color:orange;
}
svg{
  margin:1px;
}
rect {
  shape-rendering:crispEdges;
  stroke:none;
  fill:white;
}
td{
  vertical-align:top;
}

```

```
<div class="centered">
  <div class="content">
    <table><tr>
      <td>
        <div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum, lectus ut consectetur mattis,</p></div>
      </td>
      <td>
        <div class="svg-container">
          <svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg><svg width="50" height="50"><rect width="50" height="50"></rect></svg>
        </div>
      </td>
    </tr></table>

  </div> <!-- .content -->
</div> <!-- .centered -->

```