使左div的高度变紧而不会影响父级中的其他div

Question

不确定如何命名此名称，如果感到困惑，我们深表歉意。基本上，我正在创建一个选项卡式模块，其中.right div始终是相同的高度。

.left div包含链接/标签，但我希望该div的高度不匹配.right的链接/标签。

例如，在下面的方法中，我希望具有“内容”文本的div是自动的（与文本高度匹配）。

方法：

.parent {
  display: flex;
  flex-direction: column;
}
.flex-row{
  display: flex;
  flex-direction: row;
}

.left,
.right {
  flex-basis: 50%;
}

.left {
  border: 1px solid blue;
}

.right {
  background: red;  
  min-height: 200px;
  width: 200px;
}

<div class="parent">

  <div class="flex-row">
    <div class="left">Content</div>
    <div class="right"></div>
  </div>
  
  <div class="flex-row">
    <div class="left">Content 2</div>
  </div>
  
</div>

是这样的：

我仅出于演示目的<div class="left">Content<br>Content 2</div>就实现了以上目标。

Answer 1

使用left作为flex容器，并向其中添加两个子容器。然后，将第一个孩子的height属性设置为100％。像这样：

.parent {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.left,
.right {
  flex-basis: 50%;
}

.left {
  border: 1px solid blue;
  display: flex;
  flex-direction: column;
}

.row1 {
  height: 100%;
}

.row2 {
  background-color: lightblue;
}

.right {
  background: red;
  min-height: 200px;
  width: 200px;
}

<div class="parent">

  <div class="flex-row">
    <div class="left">
      <div class="row1">
        Content
      </div>
      <div class="row2">
        Content2
      </div>

    </div>
    <div class="right"></div>
  </div>


</div>