内容框大小更改时包裹Div？

Question

我有一个内容框，可根据来源更改大小。

下面有一个标题和信息div，它以水平内联方式显示。

如果内容框很大，这看起来很好，但如果标题和信息很小，那么看起来很小。

当内容框小于标题/信息宽度时，如何将标题和信息叠加？

但是，对于分辨率媒体查询，浏览器大小保持不变，只有框会改变大小。

https://jsfiddle.net/hphzh1ea/

大（好）

小（过度扩展）

小堆积（如何查看）

HTML

<div class="container">

  <div class="content">content</div>

  <div class="info">
    <div class="title">Title Title Title</div>
    <div class="description">info info info info info info info info info</div>
  </div>

</div>

CSS

.container {
  display: inline-block;
  margin: auto;
  text-align: center;
  padding: 1em;
  border: 1px solid black;
}
.content {
  margin: auto;
  width: 200px;
  height: 150px;
  background: gray;
}

.info {
  display: inline-block;
}
.title {
  display: inline-block;
  margin: 0 0 1em 0;
  font-weight: bold;
}
.description {
  display: inline-block;
}

Answer 1

不确定您是否在寻找纯HTML / CSS解决方案，但是我写的这个简单的jQuery脚本可能会有所帮助吗？

$(".container").find(function() {
  var contentWidth = $(".content").outerWidth();
  var infoWidth = $(".info").outerWidth();
  if (contentWidth < infoWidth){
    $(".description").css('display', 'block');
  }
});