Search code examples
javascripthtmlcssreactjsemotion

Box Shadow Cut off

I have a container that lists some cards (divs). This container is a grid element with 2 columns The CSS for the container element is below.

  display: grid;
  grid-template-columns: repeat(2, 350px);
  grid-template-rows: min-content;
  gap: 1.75rem 3rem;
  margin-top: 1.5rem;
  width: 100%;

  // This is needed to display the box-shadows since overflow is set
  padding: 10px;
  margin: -10px;
  margin-top: 1rem;
  height: 450px;
  overflow-y: scroll;
}

Each card element (the element with a box-shadow) is wrapped in a div that extends its height by 16px

const Wrapper = styled(Box)`
  height: calc(100% + 16px);
`;

This seems to fix the box-shadow being cut off, but the height: 450px does not work across every browser as it appears inconsistent. I'm trying to arrive at a solution where the height of the card container (which is the scrolling container, code below) is only say 12px from the bottom so that this hacky solution can be avoided.

I'm not quite able to understand why the box-shadow at the bottom is cut off though.

box shadow cut off

.grid {
  display: grid;
  grid-template-columns: repeat(2, 350px);
  grid-template-rows: min-content;
  gap: 1.75rem 3rem;
  margin-top: 1.5rem;
  width: 100%;
  
  padding: 16px;
  padding-bottom: 16px;
  margin: -10px;
  margin-top: 1rem;
  margin-bottom: -16px;
  height: 450px;
  overflow-y: scroll;
  
  outline: 1px solid red;
}

.card {
  padding: 1rem 1.25rem;
  outline: 1px solid blue;
  width: 350px;
  height: 245px;
  
  box-shadow:
    -5px -5px 10px 0px white,
    10px 10px 15px 0px black;
}
<div class="grid">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Solution

  • here is the solution on your query.

    .grid-wrapper {
  overflow-y: scroll;
  height: 450px;
  overflow-x: hidden;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 350px);
  grid-template-rows: min-content;
  gap: 1.75rem 3rem;
  margin-top: 1.5rem;
  width: 100%;
  padding: 16px;
  padding-bottom: 16px;
  margin: -10px;
  margin-top: 1rem;
  margin-bottom: -16px;
  overflow: hidden;
  outline: 1px solid red;
}

.card {
  padding: 1rem 1.25rem;
  outline: 1px solid blue;
  width: 350px;
  height: 245px;
  box-shadow: -5px -5px 10px 0px white, 10px 10px 15px 0px black;
}
    <div class="grid-wrapper">
  <div class="grid">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>