下面是另一个Flexbox解决方案，它允许第二个子对象进行 Package ，以匹配可变高度兄弟对象的宽度。

.wrapper > div {
  border: 1px solid;
}

.child {
  display: flex;
}

.child div {
  flex-grow: 1;
  width: 0;
}

.wrapper {
  display: inline-block;
}

<div class="wrapper">
    <div>This div is dynamically sized based on its content</div>
    <div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>
</div>

编辑：
要在.child下支持多个div，其中每个div位于其自己的行上，请添加break-after: always; ...

.child div {
  flex-grow: 1;
  width: 0;
  break-after: always;
}

浮点数和表都是2000年以后才出现的，在今天的浏览器中，我们可以让两个兄弟DIV的宽度匹配，而不管哪个更大/更小。
以下是适合2016年的Flexbox解决方案：

.wrapper {
  display: inline-block;
}

.parent {
  display: flex;
  flex-direction: column;
}

/* For visualization */
.child {
  border: 1px solid #0EA2E8;
  margin: 2px;
  padding: 1px 5px;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">Child number one</div>
    <div class="child">Child #2</div>
  </div>
</div>

将div设置为display:inline-block，这样您的div将随其内部的内容一起扩展。
http://jsfiddle.net/CpKDX/

2023保持简单...

使用grid和fr单位，然后可以根据需要拆分为任意多个大小相同的行或列：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1em;
}

.container > div {
  border: 1px solid black;
  padding: 0.5em;
}

<div class="container">
  <div>I'm a part of a grid. I will be split up into equal parts with my other sibling(s) depending on how many columns the grid is given.</div>
  <div>I am a sibling element.</div>
</div>

这里仍然是一个基于flexbox的方法。
其基本思想是：在最外面的 Package 器中，需要具有相等宽度的元素被 Package 到"另一个" Package 器中。

.wrapper {
  display: inline-block;
}

.flex-wrapper {
  display: flex;
  flex-direction: column;
}

.demo-bar {
  height: 4px;
  background-color: deepskyblue;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div contenteditable>Some editable text.</div>
    <div class="demo-bar"></div>
  </div>
</div>

另一个实际例子：在媒体（视频或音频）元素下方具有相同宽度的自适应进度条。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

更新：这对我很有效，我刚刚试过：

<div style="max-width:980px;border:1px solid red;">
   <div style="background:#EEE;float:left;">
     <div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
     <div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
   </div>
     <div style="clear:both;"></div>
</div>

这是你想要的吗？边框和背景只是为了显示div;）
就像这样：
假设你希望整个divs最大为980 px（否则就忽略它或者替换为100%）...

<div style="max-width:980px;">
     <div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
     </div>
     <div style="width:100%;"> The div will be 100% of the mother div too.
     </div>
</div>

第二个选项是，再使用一个div...或者使用style="width:auto;"作为动态div...

不确定我是否理解了您要做的事情，但似乎将最后一个div的宽度设置为100%应该可以：

<div style="width:100%;">

顺便说一句，第一个div中的样式没有很好地定义，您应该在属性定义中使用冒号而不是等号：

<div style="display:inline;">

如果您愿意给予几个<div>，那么我有解决方案给您：

<div style=“display: inline-block;”>
  <table>
    <tr>
      <td>The table automatically makes its siblings the same width</td>
    </tr>
    <tr>
      <td>So this will be as wide</td>
    </tr>
  </table>
</div>

请记住设置div display:inline-block;