bootstrap 4 显示 flex 中的自动宽度绝对位置

Question

我有一个 div 并使用引导程序 4 将显示设置为 flex。然后我添加另一个 div 并将 position 设置为 absolute 和 rotate 使用 transform。像这样：

<div class="container">
  <div class="area d-flex position-relative">
    <div class="title">
      title
    </div>
    <div>
      content
    </div>
  </div>
</div>

CSS：

.inner {
  background: #f1f1f1;
}

.title {
  transform: rotate(-90deg) !important;
  position: absolute;
  left: -20px;
  top: 43px;
  text-align: center;
  font-size: 12px;
  background-color: #000;
  width: auto;
}

我将width 设置为auto 以使用absolute 自动调整div 的width 的大小。但实际上它不起作用。我该如何解决这个问题？

我需要这个：

编辑的演示：

演示Here

Answer 1

我认为可以使用 border-left 而不是 d-flex 来完成，当我们比较两者并且两者都给出相同的输出时，这会变得更加复杂

我的方法是给<div>content</div>一个border-left，它创建一个黑色垂直矩形和rotate一个<div>title</div>和270deg，并使用top:50%; transform: translateY(-50%);使其居中，但它的位置应该是absolute

.wrapper{
  padding-left: 1rem;
  border-left: 40px solid black;
  position: absolute;
}

.title{
  position: absolute;
  color: white;
  letter-spacing: 2px;
  font-size: 12px;
  left: -5%;
  top: 50%;
  transform: translateY(-50%) rotate(270deg);
}

<div class="container">
  <div class="wrapper">
      <div class='title'>title</div>
    <div>
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
    </div>
  </div>
</div>

更新：响应式设计代码

由于.content 的高度值应作为宽度分配给.title，因此需要一点 JavaScript 并在下面的代码 sn-p 中添加。（据我所知，这是不可能的纯 CSS）。

let eleHeight = document.getElementById('content').offsetHeight;
let titleEle = document.getElementById('title');
titleEle.style.minWidth = eleHeight+"px";

.wrapper{
    padding: 4rem;
}

.inner{
    display: flex;
   position: relative;
}

.side-text{
    color: white;
    position: absolute;
    transform: rotate(90deg);
    transform-origin: top left;
}

.title{
    text-align: center;
    background-color: black;
  margin: auto; 
}

.content{
    padding-left: 1rem;
}

<div class='wrapper'>
    <div class='inner'>
          <div class='side-text'>
              <div id='title' class='title'>title title title</div>
          </div>
          <div id='content' class='content'>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>
</div>

Answer 2

您不需要使用转换。使用flex-row 和d-flex 来实现。

.inner {
  background: #f1f1f1;
}

.title {
  background-color: #000;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="inner d-flex flex-row">
    <div class="title">
      title
    </div>
    <div>
      content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
    </div>
  </div>
</div>

参考

Bootstrap - Flex