如何使用 flexbox 设置容器的最大宽度？

Question

我想拥有services-bar__title并services-bar__services拥有一个max-widthof1024px以便我获得容器的正常 flexbox 行为，如下所示，但列表不会比1024px视口更宽时进一步扩展。我尝试设置容器宽度和最大宽度，但它似乎没有按预期工作，因为容器不再居中，有什么想法吗？

.services-bar {
  display: flex;
  flex-direction: column;
  height: 20rem;
  width: 100%;
  box-shadow: 0 -3rem 8rem rgba(#000, 0.5);
}

.services-bar__title {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.services-bar__services {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div class="services-bar">
  <div class="services-bar__title">
    test title
  </div>
  <div class="services-bar__services">
    <div class="services-bar__services_1"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_2"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_3"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
    <div class="services-bar__services_4"></div>
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
</div>