Не работает свойство overflow-x:scroll; css,что делаю не так?

Question

[flstamn]

{% block pagename %}
    <h1>Home</h1>
{% endblock pagename %}

{% block page %}
<div class = 'pages'>

    <div class="home-page">

    </div>
    <div class="admin-page">

    </div>
    <div class="profile-page">

    </div>
    <div class="cloths-page">

    </div>
    <div class="privacy-page">

    </div>

</div>
{% endblock page %}

css

.pages{
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background: transparent;
  overflow-x:scroll;
}
.admin-page,
.cloths-page,
.profile-page,
.privacy-page,
.home-page{
  border-radius: 10px;
  width: 120px;
  height: 100%;
  background: url(anime-grust-noragami-4.gif)no-repeat;
  background-size: cover;
  background-position: center;
}

Answer 1

[Виталий Першин]

Если мой хрустальный шар прав, то нужно добавить flex-shrink: 0; для элементов, которые внутри flex контейнера, чтобы ваш width: 120px; применился...

Comments

[flstamn]

пасибо большое!!!!