如何为内部设置100％的外部元素高度

Question

我有一个弹性桌＆＃39;表＆＃39;在那里，我基本上试图将有趣的东西放在首位。我遇到的问题是无法用HTML编写

我当前的结果

我试图获得

的结果

我试图在没有内部divs和spans的情况下通过执行margin:auto来做到这一点，但遗憾的是它将边框从左侧和右侧重新定位到中间位置:(所以代码为目前的结果是：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需使用text-align来控制span的文字对齐方式，并在span内使用填充，并且不要忘记将它们设为内嵌块：

.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>

Answer 2

您已将padding-top: 30px添加到class="top"。相反，内在的孩子（50％）应该有padding-top：30px;

当然，这可以通过更好的方式完成，上面是解决问题的最快方法。

Answer 3

您可以在左侧选项中使用justify-content: flex-end使其位于div的末尾。我已将建议的更改应用于此fiddle。

中的代码

我真的可以推荐this guide！