css - 如何使用 CSS 显示 : flex to position proportional widths?

Question

我正在使用 flex 来定位两个 div:

我在这个容器中有两个 div，如果可能的话我想像这样分隔它们:

xxxxxxxxxxx     xxxxxxxxxxx
x         x     x         x
x   45%   x 10% x  45%    x
x         x     x         x
xxxxxxxxxxx     xxxxxxxxxxx

然后如果没有足够的空间，让它们像这样显示:

xxxxxxxxxxx 
x         x  
x         x 
x         x 
xxxxxxxxxxx 

xxxxxxxxxxx 
x         x  
x         x 
x         x 
xxxxxxxxxxx 

我试过这样做，但似乎不起作用。

#city {
    margin-top: 2rem;
    border: 1px solid #ddd;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    padding: 8px 15px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border-radius: 0.4rem;
}

<div id="city">
   <div style="flex-grow: 45;">xx</div>
   <div style="flex-grow: 10;"></div>
   <div style="flex-grow: 45;">yy</div>
</div>

谁能指出我可能做错了什么？

Answer 1

除了 GCyrillus 的评论外，我还建议使用支持其他旧版浏览器的语法:

  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */