overflow:hidden导致flex项收缩 隐藏圆角溢出的替代CSS方案

问题描述 #

我在示例的容器元素上设置overflow: hidden时，圆角溢出确实被隐藏了，但如果垂直空间不足，flex子项会丢失高度发生收缩。有没有隐藏圆角溢出的替代方案，或者可以让元素保留原有高度的额外设置？

需求场景 #

1. 导航元素占窗口100%高度，宽度为响应式的40%视窗宽度
2. 导航内部的容器元素设置了border-radius圆角
3. 容器内部为开启了flex-wrap: wrap的flex子项，子项自带背景色

核心需求 #

• 隐藏flex子项超出容器圆角范围外的背景部分
• 要求纯CSS实现

已尝试的无效方案 #

• 给容器设置overflow:hidden可以隐藏子项溢出的圆角，但垂直空间不足时子项会收缩
• 仅设置overflow-x: hidden会默认触发overflow-y: auto，出现不需要的垂直滚动条
• 直接给对应角落的flex子项设置圆角不可行，因为容器是响应式宽度，且开启了flex-wrap，子项位置不固定
• 移除导航的height属性或设置min-height可以解决子项收缩的问题，但导航会丢失滚动条，空间不足时底部内容会溢出屏幕不可见

预期效果 #

现有代码示例 #

初始基础代码

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

nav {
  box-sizing: border-box;
  border: 1px solid black;
  height: 100%;
  width: 40%;
  display: flex;
  flex-direction: column;
  overflow: scroll;  
}

#spacer {
  min-height: 400px;
  border: 2px solid darkmagenta;
}

#container {
  display: flex;
  flex-wrap: wrap;
  border: 3px solid teal;
  border-radius: 20px;
  /* overflow: hidden; */
}

.flex-item {
  text-align: center;
  flex-grow: 1;
  padding: 40px 20px;
  border: 2px solid orange;
  background: darkorange;
}

<nav>
    <div id="spacer"></div>
    <div id="container">
      <div class="flex-item">All</div>
      <div class="flex-item">Adjective</div>
      <div class="flex-item">Adverb</div>
      <div class="flex-item">Conjunction</div>
      <div class="flex-item">Noun</div>
      <div class="flex-item">Number</div>
      <div class="flex-item">Preposition</div>
      <div class="flex-item">Pronoun</div>
      <div class="flex-item">Verb</div>
    </div>
  </nav>

现有JS实现方案（需求为纯CSS替代）

document.body.onresize = setBorderRadius;

function setBorderRadius() {
  let r = "var(--border-radius)"
  let flexItems = [...document.getElementsByClassName("flex-item")];
  flexItems.forEach(item => item.style.borderRadius = "0")

  let topTmp = 0
  const sortedByRows = flexItems.reduce((acc, item) => {
    let top = item.getBoundingClientRect().top
    if (top > topTmp) acc.push([item])
    else acc[acc.length - 1].push(item)
    topTmp = top
    return acc
  }, [])

  let firstRow = sortedByRows[0]
  let upperLeft = firstRow[0]
  let upperRight = firstRow[firstRow.length-1]
  
  let lastRow = sortedByRows[sortedByRows.length-1]
  let lowerLeft = lastRow[0]
  let lowerRight = lastRow[lastRow.length-1]
     
  upperLeft.style.borderTopLeftRadius = r
  upperRight.style.borderTopRightRadius = r
  lowerLeft.style.borderBottomLeftRadius = r
  lowerRight.style.borderBottomRightRadius = r
}

setBorderRadius();

html, body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

nav {
  --border-radius: 15px;
  box-sizing: border-box;
  border: 1px solid black;
  height: 100%;
  width: 80%;
  display: flex;
  flex-direction: column;
  overflow: scroll;  
}

#spacer {
  min-height: 400px;
  border: 2px solid darkmagenta;
}

#container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex-grow: 1;
  padding: 40px 20px;
  border: 2px solid orange;
  background: darkorange;
}

<nav>
    <div id="spacer"></div>
    <div id="container">
      <div class="flex-item">All</div>
      <div class="flex-item">Adjective</div>
      <div class="flex-item">Adverb</div>
      <div class="flex-item">Conjunction</div>
      <div class="flex-item">Noun</div>
      <div class="flex-item">Number</div>
      <div class="flex-item">Preposition</div>
      <div class="flex-item">Pronoun</div>
      <div class="flex-item">Verb</div>
    </div>
  </nav>

解决方案 #

你只需要给容器同时设置overflow: clip和contain: layout即可完美实现需求：

#container {
  display: flex;
  flex-wrap: wrap;
  border: 3px solid teal;
  border-radius: 20px;
  overflow: clip; /* 替代overflow:hidden，不会触发滚动容器机制 */
  contain: layout; /* 确保裁剪边界生效，同时不影响flex子项的高度计算 */
}

overflow: clip和overflow: hidden的核心区别是：clip会直接裁剪溢出内容，不会创建滚动容器，也不会影响父级flex布局下的子元素尺寸计算，完全不会导致你的flex子项出现高度收缩问题，也不会额外触发滚动条。
如果需要兼容低版本浏览器，也可以给flex容器外层套一层额外的wrapper节点，wrapper设置overflow: hidden和圆角，同时给wrapper设置flex-shrink: 0即可避免收缩：

<div class="container-wrapper">
  <div id="container">
    <!-- flex子项内容 -->
  </div>
</div>

.container-wrapper {
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0; /* 禁止在flex列布局中收缩 */
}
#container {
  display: flex;
  flex-wrap: wrap;
  border: 3px solid teal;
}

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