How to set the max-width of a container with flexbox?

Question

I would like to have services-bar__title and services-bar__services to have a max-width of 1024px so that I get the normal flexbox behaviour for the container as formatted below, but the list doesn't expand further than 1024px if the viewport is wider. I tried setting the container widths and max-widths, but it doesn't seem to work as expected as the container doesn't stay centered anymore, any ideas?

.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>

Answer 1

To do that, you don't need to make your services-bar a flex, rather only keep services-bar__title and services-bar__services as flex.

Use justify-content: space-around; in the services-bar__services to distribute the items throughout the container. And for the services-bar, set max-width: 1024px; as well as margin: 0 auto; so that it remains in center and don't go beyond 1024px.

Try this out:

body {
  margin: 0;
}

.total-width {
  width: 100%;
  height: 40px;
  background-color: blue;
}

.width-1024px {
  max-width: 1024px;
  margin: 0 auto;
  height: 40px;
  background-color: yellow;
}

.services-bar {
  height: 20rem;
  box-shadow: 0 -3rem 8rem rgba(#000, 0.5);
  max-width: 1024px;
  margin: 0 auto;
}

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

.services-bar__services ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 0;
}

<div class="total-width"></div>
<div class="width-1024px"></div>

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

And here's the jsfiddle: http://jsfiddle.net/yostrh8n/25/

Answer 2

If I understood you correctly, you want to expand the service to 100% up to 1024px. Right?

To do so, u need to set the default width to 100%, and set the max-width to 1024px.

.services-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: 0 -3rem 8rem rgba(0, 0, 0, 0.5);
  max-width: 1024px;
  
  .services-bar__title {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .services-bar__services {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .services-bar__services_1,
  .services-bar__services_2,
  .services-bar__services_3,
  .services-bar__services_4 {}

<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>