Flex环境内带旋转标题的行布局问题求助

目标 #

最终需实现带旋转标题的行布局效果（忽略截图中的白色边框，为裁剪所致）：

约束条件 #

元素必须置于以下无法轻易修改的标记结构内：

<div style="position:absolute;top:15px;right:15px;bottom:15px;left:15px">
  <div style="display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex:column;flex-direction:column;width:100%;height:100%;">
     <div style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
        <div style="position:absolute;top:0;left:0;right:0;bottom:0;">
          <!-- 在此放置元素 -->
        </div>
     </div>
  </div>
</div>

已尝试方案 #

使用如下HTML结构及CSS样式：

<div class="split-container">
  <div class="split-heading">
    <h3>标题</h3>
  </div>
  <div class="split-content">
    <p>内容</p>
  </div>
</div>

.split-container {
  display: flex;
  height: 100%;
}

.split-heading {
  background-color: rgb(198,89,17);
  color: #fff;
  padding: 0 5px; /* 给两侧添加内边距 */
}

.split-heading > h3 {
  transform: rotate(-90deg);
  transform-origin: bottom right;
}

.split-content {
  flex-grow: 100;
  background-color: rgb(244,176,132);
  color: #fff;
}

当前效果 #

当前效果截图：

存在问题 #

• 标题容器占用宽度过宽，应仅占用所需空间
• 标题需在容器内垂直、水平居中
• 内容需垂直居中

解决方案 #

针对上述问题，调整后的完整CSS如下：

.split-container {
  display: flex;
  height: 100%;
}

.split-heading {
  background-color: rgb(198,89,17);
  color: #fff;
  padding: 0 5px;
  /* 让容器仅包裹标题内容，同时实现内部居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-width: fit-content;
}

.split-heading > h3 {
  margin: 0;
  transform: rotate(-90deg);
  transform-origin: center center;
  /* 修正旋转后的位置偏移 */
  translate: 0 100%;
}

.split-content {
  flex-grow: 1; /* 占满剩余空间 */
  background-color: rgb(244,176,132);
  color: #fff;
  /* 实现内容垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

关键调整说明 #

1. 标题容器宽度优化：通过display: flex、white-space: nowrap和min-width: fit-content，让标题容器仅包裹自身内容，避免多余宽度占用。
2. 标题居中修正：将transform-origin改为中心位置，配合translate修正旋转后标题的偏移，同时利用flex布局让标题在容器内垂直水平居中。
3. 内容居中实现：给内容容器添加flex布局属性，通过align-items: center和justify-content: center实现内容居中，同时将flex-grow:100改为flex-grow:1，确保内容容器占满剩余空间。

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