当内容在一行时，将DIV包装到内容中仅包装

Question

我正在尝试将多个fieldsets包裹在周围的div中。当浏览器足够大以适应一行上的所有fieldsets时，div包装正常，但当它们流向下一行时，div边界将捕捉到浏览器窗口（Chrome）的右边缘。如何在不使用设置宽度或使用JS的情况下克服这个问题？

HTML

 <div id="wrapper" class="display-inline-block">
        <fieldset id="f1" class="display-inline-block">
            <legend>F1</legend>
            <p>Lorem ipsum dolor sit amet</p>
        </fieldset>
        <fieldset id="f2" class="display-inline-block">
            <legend>F2</legend>
            <p>Lorem ipsum dolor sit amet</p>
        </fieldset>
    </div

CSS

 #wrapper
    {
        margin: 10px;
        padding: 10px;
        border: 1px solid red;
    }
    .display-inline-block
    { 
        display:-moz-inline-stack;
        display:inline-block;
        zoom: 1;
        *display: inline;
        vertical-align: top;
    }

Answer 1

过去5分钟看了这个，除了可能的媒体查询外，看起来不像纯CSS。