I am trying to create a 'responsive' box with a fixed width that contains a logo and an infobar. The infobar should take up the remaining space in the box, calculated using calc(). To ensure the infobar is still usable, I have set a min-width for it.
Everything works fine until the screen width becomes too small and the flexbox breaks into two rows. At this point, there are two design problems that I need to address:
1) I want the logo in the first row to be centered horizontally.
2) I want the infobar to occupy the entire width of the second row.
(Currently, the logo is stuck on the left in the first row, and the infobar in the second row doesn't account for the size of the logo that was subtracted.)
Is there a way to achieve this layout using flexboxes?
Here is the HTML code:
<!DOCTYPE html>
<head>
<link rel=stylesheet type="text/css" href="test.css">
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<div class="box wrap" align="center">
<div class="logo">logo</div>
<div class="infobar">infobar</div>
</div>
</body>
</html>
And here is the CSS code (test.css):
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}