时间戳

首页 > 解决方案 > box-shadow 被父元素截断

css - box-shadow 被父元素截断

问题描述

body {
  margin: 0;
}

.root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: red;
}

.strip {
  height: 120px;
  background-color: rgb(111, 0, 255);
}

.main {
  flex: 1;
  overflow: hidden;
  margin: 48px;
  background-color: rgb(0, 255, 179);
  display: grid;
  grid-template-rows: min-content min-content 1fr;
}

.header {
  height: 100px;
  background-color: rgb(0, 217, 255);
}

.gallery {
  height: 200px;
  background-color: rgb(166, 255, 0);
  box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, 0.75);
  z-index: 100;
}

.list {
  background-color: rgb(214, 58, 131);
  overflow: auto;
}
<div class="root">
  <div class="strip">strip</div>
  <div class="main">
    <div class="header">header</div>
    <div class="gallery">gallery</div>
    <div class="list">
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
    </div>
  </div>
</div>

如您所见，画廊元素具有框阴影，但如果我将 .main css 更改为溢出，它将从父 div 中剪切：可见框阴影不会被切断，但它将禁用列表元素滚动

有没有办法将这两者结合在一起？（scroll 和 box-shadow 不切割）

顺便说一句：strip 元素有时可以渲染，有时不能

谢谢

标签： css

解决方案

找到一个解决方案，删除overflow: hiddenfrom .main（如果有的话，从所有父母中删除），并使用min-height: 0它来flex: 1获取剩余的高度（而不是更多）。

body {
  margin: 0;
}

.root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background-color: red;
}

.strip {
  height: 120px;
  background-color: rgb(111, 0, 255);
}

.main {
  flex: 1;
  // overflow: hidden;
  min-height: 0; // <-- this will cause the flex: 1 take only the given height.
  margin: 48px;
  background-color: rgb(0, 255, 179);
  display: grid;
  grid-template-rows: min-content min-content 1fr;
}

.header {
  height: 100px;
  background-color: rgb(0, 217, 255);
}

.gallery {
  height: 200px;
  background-color: rgb(166, 255, 0);
  box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, 0.75);
  z-index: 100;
}

.list {
  background-color: rgb(214, 58, 131);
  overflow: auto;
}
<div class="root">
  <div class="strip">strip</div>
  <div class="main">
    <div class="header">header</div>
    <div class="gallery">gallery</div>
    <div class="list">
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
      <div class="list-item">
        <h1>Item</h1>
      </div>
    </div>
  </div>
</div>

推荐阅读