css - 带 flexbox 的垂直标签

Question

我想实现一个垂直标签布局，所以左边是标签，右边是标签内容。挑战在于我必须遵守使事情变得复杂的特定标记。

下面是我最后一次尝试，我无法让标签填充内容留下的空间:

ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.tabs-container{
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

.tab{
 width: 100px;
 background-color: gray;
}

.tab-content{
  display: none;
}
.tab-content.active{
  display: block;
  height: 100px;
  order: -1;
  align-self: flex-end;
}

<ul class='tabs-container'>
  <li class='tab'>tab one</li>
  <li class='tab-content active'>contents tab one</li>
  <li class='tab'>tab two</li>
  <li class='tab-content '>contents tab two</li>
  <li class='tab'>tab three</li>
  <li class='tab-content'>contents tab three</li>
</ul>

是否有使用 css flex box 解决此问题的方法？

谢谢

Answer 1

<div class="container">
    <div class="obj"><div class="tab">Tab1</div><div class="tab-c">TabContent1</div></div>
    <div class="obj"><div class="tab">Tab2</div><div class="tab-c">TabContent2</div></div>
</div>
<style>
    .container {
        display: flex;
        flex-direction: column;
        background-color: tomato;
    }
    .obj {
        display: flex;
        /*no need of specify the flex direction here it's row by default*/
        background-color: orange;
        margin: 10px;
    }
    .tab {
        width: 50px;
        background-color: yellow;
    }
    .tab-c {
        width: 150px;
        background-color: white;
    }
</style>

这可能不是最优雅的方式，但它可以满足我的需要