Flexbox列表溢出容器

Question

我有一个小卡设置，包括每张卡底部/页脚的一些链接。我使用flexbox设置它们，然而，它们是从容器中扩展出来的。

我尝试为列表和页脚div指定宽度，但不能使其换行。有什么想法吗？

create view order_extended as (
SELECT ol.products_id, ol.quantity, p.product_name, p.brand, 
case when s.name = "WALMART" then sp.purchase_price end as Walmart,
case when s.name = "SAMS" then sp.purchase_price end as Sams,
case when s.name = "LEY" then sp.purchase_price end as Ley,

FROM order_lists ol 
inner join products p on ol.products_id = p.id
inner join supplier_products sp on p.id = sp.products_id
inner join suppliers s on sp.supplier_id = s.id
);

.container {
    /*added by the editor to correctly reproduce the problem*/
        width:250px;
    /*-----*/
        background: #fff;
        border-radius: 5px;
        border: 1px solid #404040;
        box-shadow: 2px 2px 4px #888;
        margin: 0 auto;
    }

    .body {
        margin: 0 auto;
        width: 90%;
    }

    .footer ul {
        list-style: none;
        display: flex;
        flex: row wrap;
        justify-content: flex-end;
        padding-left: 0;
    }

    .footer li+li {
        margin-left: .5rem;
    }

  .footer li {
      line-height: 1.5rem;
      text-align: center;
      position: relative;
      white-space: nowrap;
  }

Answer 1

你的.footer ul上的属性名称不正确。而不是flex: row wrap，应该是flex-flow: row wrap

由于该属性值无效，因此忽略该规则，并且没有任何迹象表明浏览器将Flex项目包装在该Flex容器中。

＆＃13;

＆＃13;

.container {
        width:250px;
        background: #fff;
        border-radius: 5px;
        border: 1px solid #404040;
        box-shadow: 2px 2px 4px #888;
        margin: 0 auto;
    }

    .footer ul {
        list-style: none;
        display: flex;
        /*only change is here*/
        flex-flow: row wrap;
        /*--------*/
        justify-content: flex-end;
        padding-left: 0;
    }

    .footer li+li {
        margin-left: .5rem;
    }

  .footer li {
      line-height: 1.5rem;
      text-align: center;
      position: relative;
      white-space: nowrap;
  }

＆＃13;

<div class="container">
       <div>
          Header Stuff
       </div>
       <div class="body">
          Body Stuff
       </div>
       <div class="footer">
          <ul>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
           <li><a href="">Footer Link</a></li>
          </ul>
       </div>
    </div>

＆＃13;

＆＃13;

＆＃13;