Как сделать тень до конца итема?

Question

[offsiderst]

в адаптиве хорошо видно - она не всю ширину
https://jsfiddle.net/07f9btwn/

Answer 1

[Ankhena]

width: min-content; для basket__item или basket__inner.
Кстати, зачем им 2 обертки?

Comments

[offsiderst]

Ankhena, обрезается тень из-за overflow для basket____wrap-table
или нужно по другому?

[offsiderst]

Ankhena, задаю width: min-content. Но тогда прокрутка будет всегда ( даже на самых больших экранах)

[Ankhena]

offsiderst,
для тени так

.basket__item::after{
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  z-index: -1;
}

Жуткая вложенность и nth-child сокращаются до такого кода:

.basket__title:nth-child(1),
 .basket__box:nth-child(1){

	min-width: 455px;
	max-width: 275px;
	padding-left: 36px;
	padding-right: 20px;
	width: 100%;
}

.basket__title:nth-child(2),
 .basket__box:nth-child(2)
 {
	min-width: 170px;
	max-width: 170px;
}

.basket__title:nth-child(3),
.basket__box:nth-child(3)
{
	min-width: 135px;
	max-width: 135px;
}

 .basket__title:nth-child(4),
 .basket__box:nth-child(4)
 {
	min-width: 180px;
	max-width: 180px;
}
.basket__title:nth-child(5),
.basket__box:nth-child(5)
 {
	min-width: 200px;
	max-width: 200px;
}

 .basket__box:nth-child(6),
.basket__box:nth-child(6) {
	min-width: 50px;
	max-width: 50px;
}

Осталось выяснить, зачем вы пишете

min-width: 50px;
max-width: 50px;

когда есть обычный width и flex-shrink

Или грид вместо флекс для родителя. Тогда вообще все эти строчки можно выкинуть.

[Ankhena]

offsiderst,

Но тогда прокрутка будет всегда ( даже на самых больших экранах)

У вас и в оригинале она всегда https://jsfiddle.net/07f9btwn/
Нужно разбираться с шириной.

[offsiderst]

Ankhena, когда есть обычный width и flex-shrink

а как тогда можно заменить?

и это также можно упростить?

min-width: 455px;
  max-width: 275px;
  width: 100%;

[Ankhena]

offsiderst, минимальная 455, а максимальная 275? Я эту строчку вообще решила не комментировать на всякий случай.

Но если всё таки значения будут стоять правильно, то тогда нормально использовать мин и макс.

Если мин и макс ширина одинаковая, то заменить на

flex-shrink: 0
width: 50px

[offsiderst]

Ankhena, спасибо
а вместо вашего способа использовать мой - дурной тон?)

[Ankhena]

offsiderst, представьте, что вы увидите это в чужом коде, сразу будет понятно, что хотел сказать другой разработчик или уйдет какое-то время на то, чтобы убедиться в том, что оба числа действительно одинаковые и потом почесать репку, чтобы понять зачем так написано?