html - 如何为内部设置外部元素的 100% 高度

Question

我有一个 flexbox“表格”，我主要是想在上面放一些有趣的东西。我遇到的问题是无法用 HTML 编写

我目前的成绩

我试图得到的结果

我尝试在没有内部 divs 和 spans 的情况下通过执行 margin:auto 来做到这一点，但不幸的是它重新定位了左边的边界和右边到中间 :( 所以当前结果的代码是:

.flex-container {
  width: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-container .middle {
  flex: 1;                       
  display: flex;                 
}

.top {
  padding-top: 30px;
  border: 2px solid #05788D;
  display:flex;
}

.leftSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
}

.rightSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
  border-left-style: none;
}

.firstOption
{
	border: 2px solid #05788D;
	border-top-style: none;
	border-bottom-style:none;
}

.anotherOption 
{
	border: 2px solid #05788D;
	border-top-style: none;
	border-bottom-style:none;
	border-left-style:none;
}

<div class="flex-container">

  <div class="top">
  
	<div style="width:50%;">
    <span class="firstOption">One option</span>
	</div>
	
	<div style="width:50%;">
	<span class="anotherOption">Another option</span>
	</div>
	
  </div>

  <div class="middle">

    <div class="leftSide">
      left
    </div>

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

  </div>

</div>

Answer 1

只需使用 text-align 来控制 span 的文本对齐方式，并在 span 中使用 padding 并且不要忘记制作他们内联 block :

.flex-container {
  width: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-container .middle {
  flex: 1;
  display: flex;
}

.top {
  border: 2px solid #05788D;
  display: flex;
}
.top div {
  flex:1;

}

.leftSide {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
}

.rightSide{
  display: flex;
  flex-wrap: wrap;
  flex-basis: 50%;
  overflow: auto;
  border: 2px solid #05788D;
  border-left-style: none;
}
.firstOption  {
 text-align:right;
}

.firstOption span,.anotherOption span{
  border: 2px solid #05788D;
  padding-top: 30px;
  display:inline-block;
}

<div class="flex-container">

  <div class="top">
    <div class="firstOption"><span>One option</span></div>
    <div class="anotherOption"><span>Another option</span></div>

  </div>

  <div class="middle">

    <div class="leftSide">
      left
    </div>

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

  </div>

</div>