Почему когда я увеличиваю width не увеличивается?

Question

[Nayro TV]

Вот так показывает мне

картинка

html

<div class="page-news__item">
							<div class="page-news__img">
								<a href="#">
									<img
										src="./assets/images/page-news/placeholder.jpg"
										alt="Изображение новости"
									/>
								</a>
							</div>
							<div class="page-news__category">
								<a href="#"> Строительство </a>
							</div>
							<div class="page-news__title">
								<a href="#">
									<h3>
										Экологичные материалы для ремонта: как сделать дом более
										устойчивым к окружающей среде
									</h3>
								</a>
							</div>
							<div class="page-news__descr">
								<a href="#">
									<p>
										Узнайте о разнообразных экологичных материалах, которые
										помогут вам сделать
									</p>
								</a>
							</div>
							<div class="page-news__bottom">
								<div class="page-news__date">19.05.2023</div>
								<div class="page-news__reaction">
									<div class="page-news__eye">
										<img
											src="./assets/images/icons/visibility.svg"
											alt="Изображение новости"
										/>
										<span>1225</span>
									</div>
									<div class="page-news__like">
										<img
											src="./assets/images/icons/thumb_up.svg"
											alt="иконка нравится"
										/>
										<span>25</span>
									</div>
									<div class="page-news__comment">
										<a href="#">
											<img
												src="./assets/images/icons/mode_comment.svg"
												alt="иконка комментариев"
											/>
											<span>12</span>
										</a>
									</div>
								</div>
							</div>
						</div>

сss

.page-news__list {
    overflow-x: auto;
    padding-bottom: 35px;

    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.page-news__item {
    padding: 0;
    margin: 0;
    width: 190px !important;
    border-radius: 5px;
    border: 1px solid #f6f6f6;
    margin-left: 10px;
    padding-bottom: 20px;
}

Хочу чтобы item увеличил свою ширину но не идёт поче му то :(

Answer 1

[Илья Салигжанов]

Скорее всего - потому, что менять ширину элемента flex-контейнера нужно в первую очередь через flex-basis

Comments

[Nayro TV]

.page-news__item {
flex-basis: 190px
}
добавить получаеться?
Но не робит :(

flex-shrink: 0 надо было ))) спс бро))

Answer 2

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

Ваши item являются флекс элементами и имеют свойство flex-shrink, которое по умолчанию ровно 1. Чтобы они забирали все требуемое ими пространство поставьте flex-shrink: 0

Comments

[Nayro TV]

Спасибо бро, ты лучший! :)