Тень и переполнение поля в HTML/CSS
Я создал контейнер в Html, который содержит несколько элементов div, но видны только 3 элемента div, а другие элементы div скрыты в переполнении, которое вы можете увидеть, прокручивая ось X (переполнение: авто). Я дал box-shadow каждому дочернему div, но дело в том, что половина тени скрывается в родительском div, потому что переполнение оси Y скрыто.
Это мой код для HTML и CSS.
Это вывод этого кода. Как вы можете видеть, тень нижней части каждого div скрывается в родительском контейнере.
Я хочу такую тень.
Вы можете видеть, что тень внизу полная и не скрыта. Но для этого мне нужно удалить каждое переполнение, из-за которого видны другие элементы div. Могу ли я что-нибудь сделать, чтобы решить эту проблему? Увеличение нижнего и верхнего поля также не решает проблему. Пожалуйста помоги!
body {
display: flex;
width: 100%;
justify-content: center;
}
.container {
display: flex;
width: 55%;
overflow: auto;
}
.container div {
flex: 0 0 calc(33.33% - 2em);
width: 350px;
height: 250px;
margin: 1em 2em;
background-color: red;
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}<body>
<div class = "container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>Я добавил .container { padding-bottom: 40px;} и кажется, что тень полностью видна. Попробуйте это.
Ответы 1
Чтобы освободить место, вы можете добавить контейнеру отступы внизу — вам нужно переместить полосу прокрутки подальше от тени, а не пытаться наложить на нее тень.
body {
display: flex;
width: 100%;
justify-content: center;
}
.container {
display: flex;
width: 55%;
overflow: auto;
padding-bottom: 50px;
}
.container div {
flex: 0 0 calc(33.33% - 2em);
width: 350px;
height: 250px;
margin: 1em 2em;
background-color: red;
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}<body>
<div class = "container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
Добавьте
padding-bottom: 1em;к.containerи отрегулируйте значение отступа в зависимости от значения тени.