CSS Grid 中的 Float 和 min-height 伪元素导致溢出

问题描述

我正在制作一个产品横幅，文字围绕着剪下的图像和页脚中的徽标流动。

主要问题

当 min-height 属性添加到 .panel-body:before 时，<p> 内容停止扩展其父级 .panel-body 并溢出 .panel-footer 并溢出 {{ 1}}。为什么？

.panel

html {
  font-size: 16px;
}

body {
  padding-top: 2rem;
  font: 1rem/1.5 sans-serif;
}

.svg-clip {
  position: absolute;
  width: 0;
  height: 0;
}

.panel-banner {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  grid-auto-rows: 1fr auto;
  grid-gap: 0;
  color: #fff;
  background-color: #666;
}

.panel-banner .panel-heading {
  grid-column: 7 / 13;
  grid-row: 1 / 3;
  padding: 0;
  background-image: url(https://picsum.photos/720/1024?random=4);
  clip-path: url(#image-clip-path);
}

.panel-banner .panel-body {
  grid-column: 1 / 13;
  grid-row: 1;
  z-index: 10;
  padding: 1.5rem;
}

.panel-banner .panel-body p {
  margin: 0 0 1.5rem 0;
  font-size: 2.5rem;
}

.panel-banner .panel-body::before {
  content: "";
  display: block;
  float: right;
  min-width: 50%;
  min-height: 100%;
  shape-outside: polygon(2% 0%,49% 70%,51% 85%,42% 100%,100% 100%,100% 0%,2% 0%);
}

.panel-banner .panel-footer {
  grid-column: 1 / 7;
  grid-row: 2;
  padding: 1.5rem;
  border-top: none;
  background-color: transparent;
}

https://jsfiddle.net/oinkquack/p2x4yo8d/2/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）