SVG超出父容器，箭头线条无法适配外层区块高度问题求助

我一直无法弄清楚为什么线条不响应父元素的高度，且不能为event-container设置高度（演示中添加的其他高度仅作示例）。最终需要箭头线条能根据外层区块的整体高度自动伸缩，请问我遗漏了什么？

原代码 #

CSS

.content {
  display: flex;
}

.container {
  display: inline-block;
  height: 100px;
}

.event-number {
  margin-right: 32px;
  margin-top: 8px;
  width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  height: 100%;
}

.event-circle {
  height: 28px;
  border-radius: 28px;
  background-color: #aac9ff;
}

p {
  margin: 0;
  padding-top: 4px;
}

.event-container {
  /*height: calc(100% - 36px);*/
}

.event-container .line {
  stroke: #aac9ff;
  stroke-width: 3px;
}

.event-container .box {
  overflow: visible;
}

.event-container .arrow {
  fill: #aac9ff;
}

HTML

<div class="content">
  <journey-counter class="hydrated">
    <div class="container">
      <div class="event-number">
        <div class="event-circle">
          <p>1</p>
        </div>
        <div class="event-container">
          <svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg">
            <line class="line" x1="50%" y1="0" x2="50%" y2="100%"></line>
            <svg class="box" x="50%" y="100%">
              <path class="arrow" d="M-5 -10 l10 0 l-5 10 l -5 -10  Z"></path>
            </svg>
          </svg>
        </div>
      </div>
    </div>
  </journey-counter>
  <div>
    CONTENT
  </div>
</div>

解决方案 #

问题核心是未给event-container设置自动填充剩余空间的布局约束，同时SVG的高度百分比需要明确的父元素高度参考。修改步骤如下：

1. 给event-number添加弹性布局，让子元素垂直排列并分配空间：

.event-number {
  margin-right: 32px;
  margin-top: 8px;
  width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  height: 100%;
  display: flex; /* 启用弹性布局 */
  flex-direction: column; /* 垂直排列子元素 */
}

2. 让event-container自动填充剩余高度：

.event-container {
  flex: 1; /* 替换注释的高度，自动占满剩余空间 */
}

3. 调整SVG布局，避免箭头被容器底部截断：

.event-container svg {
  display: block; /* 消除行内元素默认间隙 */
  padding-bottom: 10px; /* 给箭头留出显示空间 */
  box-sizing: border-box;
}

修改后完整代码 #

CSS

.content {
  display: flex;
}

.container {
  display: inline-block;
  height: 100px;
}

.event-number {
  margin-right: 32px;
  margin-top: 8px;
  width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.event-circle {
  height: 28px;
  border-radius: 28px;
  background-color: #aac9ff;
}

p {
  margin: 0;
  padding-top: 4px;
}

.event-container {
  flex: 1;
}

.event-container svg {
  display: block;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.event-container .line {
  stroke: #aac9ff;
  stroke-width: 3px;
}

.event-container .box {
  overflow: visible;
}

.event-container .arrow {
  fill: #aac9ff;
}

HTML

<div class="content">
  <journey-counter class="hydrated">
    <div class="container">
      <div class="event-number">
        <div class="event-circle">
          <p>1</p>
        </div>
        <div class="event-container">
          <svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg">
            <line class="line" x1="50%" y1="0" x2="50%" y2="100%"></line>
            <svg class="box" x="50%" y="100%">
              <path class="arrow" d="M-5 -10 l10 0 l-5 10 l -5 -10  Z"></path>
            </svg>
          </svg>
        </div>
      </div>
    </div>
  </journey-counter>
  <div>
    CONTENT
  </div>
</div>

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