Остановите сжатие содержимого в оболочке, прежде чем пустое пространство (поле оболочки) слева и справа от содержимого будет скрыто

Question

Как видно из фрагмента ниже, если вы начнете изменять размер браузера, элемент <div> с class="cities-list" начнет изменять размер мгновенно.

Я надеюсь добиться того, чтобы элемент <div> с class="cities-list" не сжимался до тех пор, пока слева и справа от него не останется пустого пространства, где раньше находилось поле обертки.

Я поступаю неправильно?

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
    }
    html {
        font-size: 16px;
    }
    body {
        background-color: #fafafa;
        background-color: #f2f2f2;
        font-family: 'Roboto', sans-serif;
        height: 100%;
        width: 100%;
        line-height: 1.8rem;
    }
    .wrapper {
        width: 70%;
        margin: 0 auto;
    }
        .nav {
        background: linear-gradient(-45deg, #57cfb0, #2ab5d3);
    }
    .nav-ul {
        display: flex;
    }
    .nav li {
        padding: 11px 30px 11px 0;
        color: #ffffff;
        cursor: pointer;
        font-weight: 500;
    }
    .nav li:nth-last-child(2) {
        margin-left: auto;
    }
    .nav li:last-child {
        padding-right: 0px;
    }
    .cities-list {
        display: flex;
        margin-bottom: 10px;
    }
    .cities-list p {
        background-color: #ffffff;
        padding: 20px;
        margin: 10px 10px 10px 0px;
        cursor: pointer;
        flex-basis: 49.5%;
        text-align: center;
    }

<div class="nav">
    <div class="wrapper">
        <ul class='nav-ul'>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>
    </div>
</div>
<div class='wrapper'>
    <div class='cities-list'>
        <p>Tokyo, Japan</p>
        <p>London, United Kingdom</p>
    </div>
</div>

Answer 1

Вам нужно установить минимальную ширину для .cities-list, а также width: 100% для вашей оболочки, выше некоторой точки останова, например:

@media (min-width: 1200px) {
  .cities-list-wrapper {
     width: 100%;
     display: flex;
     justify-content: center;
   }

  .cities-list {
    min-width: 1180px;
    max-width: 1180px;
  }
}

(я добавил класс cities-list-wrapper для вашей оболочки)

*, *:after, *:before {
        margin: 0;
        padding: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-decoration: none;
        list-style-type: none;
    }
    html {
        font-size: 16px;
    }
    body {
        background-color: #fafafa;
        background-color: #f2f2f2;
        font-family: 'Roboto', sans-serif;
        height: 100%;
        width: 100%;
        line-height: 1.8rem;
    }
    .wrapper {
        width: 70%;
        margin: 0 auto;
    }
        .nav {
        background: linear-gradient(-45deg, #57cfb0, #2ab5d3);
    }
    .nav-ul {
        display: flex;
    }
    .nav li {
        padding: 11px 30px 11px 0;
        color: #ffffff;
        cursor: pointer;
        font-weight: 500;
    }
    .nav li:nth-last-child(2) {
        margin-left: auto;
    }
    .nav li:last-child {
        padding-right: 0px;
    }
    .cities-list {
        display: flex;
        margin-bottom: 10px;
    }
    .cities-list p {
        background-color: #ffffff;
        padding: 20px;
        margin: 10px 10px 10px 0px;
        cursor: pointer;
        flex-basis: 49.5%;
        text-align: center;
    }

@media (min-width: 1200px) {
  .cities-list-wrapper {
     width: 100%;
   }

  .cities-list {
    min-width: 1180px;
    max-width: 1180px;
    margin: auto;
  }
}

<div class="nav">
    <div class="wrapper">
        <ul class='nav-ul'>
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul>
    </div>
</div>
<div class='wrapper cities-list-wrapper'>
    <div class='cities-list'>
        <p>Tokyo, Japan</p>
        <p>London, United Kingdom</p>
    </div>
</div>

Answer 2

не уменьшается до тех пор, пока слева и справа от него не останется свободного места, где раньше было поле обертки

Вы имели в виду мобильный размер?просто используйте медиа-запрос

@media (max-width: 767px){
  .wrapper {
    width: 100%;
  }
}