求纯CSS方案：Flex布局中边框图片自适应文本高度

嘿，这个需求我之前折腾过，纯CSS完全能实现，根本不需要JS！刚好你已经用了1:2:1的Flex布局，咱们就基于这个基础来改造，让大括号自动跟着内容高度缩放，浏览器变宽时内容高度降低，括号也同步适配。

核心思路 #

利用Flex布局的align-items: stretch特性（默认就生效），让左右两个边框容器的高度自动和中间文本容器的高度保持一致，然后用CSS伪元素（::before/::after）在左右容器里画出大括号的上下部分，这样括号的高度就会完全贴合内容的高度啦。

完整实现代码 #

HTML结构

<div class="bracket-container">
  <div class="bracket bracket-left"></div>
  <div class="content">
    这里是你的文本内容，试试调整浏览器窗口宽度——当宽度增加时，内容高度会降低，左右的大括号也会跟着同步缩放高度，完全不需要JS干预！
  </div>
  <div class="bracket bracket-right"></div>
</div>

CSS样式

/* 基础Flex布局：1:2:1比例 */
.bracket-container {
  display: flex;
  max-width: 800px;
  margin: 2rem auto;
  gap: 0; /* 去掉间距让括号和内容无缝衔接 */
}

/* 左右括号容器：占1份比例 */
.bracket {
  flex: 1;
  position: relative;
  /* 确保容器高度和内容一致 */
  align-self: stretch;
}

/* 中间内容容器：占2份比例 */
.content {
  flex: 2;
  padding: 1.5rem;
  line-height: 1.6;
  background-color: #f5f5f5;
}

/* 左大括号样式 */
.bracket-left::before,
.bracket-left::after {
  content: '';
  position: absolute;
  width: 1.2rem;
  height: 50%;
  box-sizing: border-box;
  /* 括号的粗细和颜色可以自己调 */
  border: 3px solid #2d3748;
  border-right: none;
}

.bracket-left::before {
  top: 0;
  border-bottom-left-radius: 1.2rem;
  border-top: none;
}

.bracket-left::after {
  bottom: 0;
  border-top-left-radius: 1.2rem;
  border-bottom: none;
}

/* 右大括号样式 */
.bracket-right::before,
.bracket-right::after {
  content: '';
  position: absolute;
  width: 1.2rem;
  height: 50%;
  box-sizing: border-box;
  border: 3px solid #2d3748;
  border-left: none;
  right: 0;
}

.bracket-right::before {
  top: 0;
  border-bottom-right-radius: 1.2rem;
  border-top: none;
}

.bracket-right::after {
  bottom: 0;
  border-top-right-radius: 1.2rem;
  border-bottom: none;
}

关键细节说明 #

• Flex布局的高度同步：因为Flex容器默认align-items: stretch，所以左右的.bracket容器会自动拉伸到和中间.content一样的高度，这是实现自适应的核心。
• 伪元素画括号：用两个伪元素分别画大括号的上半部分和下半部分，每个伪元素高度设为容器的50%，再通过border-radius做出弯曲效果，完美拼接成完整的大括号。
• 响应式适配：当浏览器宽度增加时，中间内容的高度会自然降低，左右括号容器的高度也会跟着缩小，伪元素的50%高度也会同步变化，实现完全的自适应。

你可以根据需求调整括号的粗细、圆角大小、颜色，或者给内容容器加更多样式，这个方案完全不需要JS就能达到你要的效果~

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