无法在webkit-box flex容器内使用默认宽度设置可调整大小的div

Question

我想获取一个默认宽度为（400px）的div容器。如果屏幕尺寸小于该尺寸（宽度小于400像素），则div必须缩小。为此，我使用了max-width css属性：

<div class="parent_2">
    Text
</div>

.parent_2 {
    max-width: 400px;
    border: 1px solid gray;
}

它工作正常。但是，实际上，我的div位于另一个第三方flex组件中。因此，实际上，我有一个看起来像这样的代码：

.parent_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.parent_2 {
  max-width: 400px;
  border: 1px solid gray;
}

<div class="parent_1">
  <div class="parent_2">
    Text
  </div>
</div>

它停止工作-我自己的内部div仅缩小到文本的宽度。这不是我想要的。我应该补充一点，就是我无法修复此第三方容器，而我仅对此内部div负责。那么，我该如何解决？

我希望它看起来像这样，但是没有tweeking或删除父（class = parent_1）元素：

.parent_2 {
  max-width: 400px;
  border: 1px solid gray;
}

<div class="parent_2">
  Text
</div>