如何为不规则形状div实现适配形状的垂直滚动？

可以通过CSS的shape-outside属性配合浮动元素，实现文本内容适配不规则形状并支持滚动的效果。以下是调整后的完整代码及说明：

修改后的CSS代码 #

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
  /* 让文本环绕浮动元素的边界 */
  shape-outside: inset(0 0 0 0);
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
  shape-outside: inset(0 0 0 0);
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
  /* 固定容器高度，超出部分垂直滚动 */
  height: calc(300px - 70px - 4px);
  overflow-y: auto;
  /* 清除浮动，确保容器正确排列在浮动块下方 */
  clear: both;
  /* 内边距避免内容贴边框 */
  padding: 8px;
  box-sizing: border-box;
}

.parent {
  height: 300px;
  width: 500px;
}

对应的HTML代码 #

<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
</div>

核心逻辑说明 #

• shape-outside: inset(0 0 0 0)：强制文本内容环绕浮动元素的物理边界，滚动时内容会始终保持这个不规则的排版效果。
• 固定高度+垂直滚动：通过height和overflow-y: auto限制容器高度，内容超出时仅垂直滚动，不会撑开容器。
• clear: both：清除左右浮动影响，确保文本容器正确定位在两个红色块下方，同时保留文本环绕的特性。
• box-sizing: border-box：让内边距和边框纳入容器高度计算，避免额外撑开容器。

内容的提问来源于stack exchange，提问作者Gabriel Llorico