Make parent div with absolute position take the width of children divs

Question

I have the following html structure:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

The parent is positioned absolutely, child1 and child2 are displayed side-by-side using inline-block. I need this whole thing to be responsive based on the width of the 2 children divs. the problem is, if I increase the width of any of them, the parent's width remains the same. Changing its position to relative fixes this, but I have to have it in absolute. Is there anyway to get it to be responsive?

EDIT:

I was hoping for this to be simple, but apparently not so much... :( here's the actual HTML:

<div class="action_container">
    <div class="action_inner">
        <div class="action_title">Format Text</div>
        <div class="action_body">
            <div class="action_args_section"></div>
            <div class="action_output_section"></div>
        </div>
    </div>
</div>

And the CSS:

<style>
    .action_container {
        display: block;
        position: absolute;
    }

    .action_inner {
        border: 1px solid black;
    }

    .action_inner {
        min-width: 120px;
        min-height: 50px;
        background-color: white;
        border: 1px solid #666;
        border-radius: 5px;
    }

    .action_title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding: 3px;
    }

    .action_args_section {
        display: inline-block;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 3px;
    }

    .action_output_section {
        display: inline-block;
        width: 50px;
        vertical-align: top;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 3px;
   }
</style>

Answer 1

.parent{

  position: absolute;
  display: table;

}

.child{

  position: relative;
  display: table-cell;

}

使用此技巧可将子级设置为单行，父级设置为从其获得宽度。不要将浮点数应用于所有内容。并记住有关空格的信息：nowrap; 如果您需要在子元素中保留一行。

这是小提琴。

Answer 2

.parent {
    position:absolute;
    height:50px;
    border:1px solid red;
}
.child1 {
    width:100px;
    height:30px;
    border:1px solid green;
}
.child2 {
    width:150px;
    height:30px;
    border:1px solid blue;
}

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

这是您要找的吗？

JSFiddle