Html CSS flexbox破坏行为

我想实现一个“responsive”框（具有固定宽度），其中包含一个徽标（具有固定宽度）和一个信息栏（占据主框的剩余宽度）。因此，使用

calc（）

计算信息栏的宽度，因为如果信息栏变小，它也会包含

min width

在屏幕宽度变小，flexbox必须分成两行之前，这种方法都很有效。现在我的设计中有两个问题，我想解决：

1） 我希望包装行1中的徽标水平居中

2） 我想让信息栏占据第2行的整个宽度

（在我的解决方案中，徽标粘贴在第一个换行的左侧，而第二个换行的信息栏缺少徽标的大小，我将其减去。）

是否有使用FlexBox的解决方案？

代码（HTML）：

---

您需要启用信息框的自动增长功能，使其填满剩余空间，并使整个内容居中

div.infobar {
  flex-grow: 1; /* Fill the remaining space */
}

div.wrap {
  justify-content: center; /* Center whole content */
}

您的整个代码可能看起来像

div.wrap{margin:0 auto;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-wrap:wrap;display:flex;flex-wrap:wrap}
div.box{min-height:100px;max-width:1200px}
div.logo{width:200px;min-height:128px;margin-bottom:10px;margin-right:10px;background-color:#456789}
div.infobar{width:calc(99% - 215px);min-width:320px;min-height:128px;text-align:left;padding-left:3px;padding-top:3px;margin-bottom:10px;background-color:#ABCDEF}

div.infobar {
  flex-grow: 1; /* Fill the remaining space */
}

div.wrap {
  justify-content: center; /* Center whole content */
}