Question

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>

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

有没有办法将这两个结合在一起？（滚动和框阴影不被剪切）

btw：strip元素有时可以渲染，有时不能渲染

谢谢

Answer 1

找到了解决方法，从import rpyc c = rpyc.classic.connect("localhost") # connect c.execute("print('hi there')") # print "hi there" on the host中除去overflow: hidden（如果有的话，从所有父母那里除去），并使用.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;
}

框阴影被父元素切断

1 个答案: