使用 Flexbox 时伪元素隐藏后

Question

我需要两个占 100% 宽度的 div，最好每个占 50%（但我很灵活）。在活动选项卡下方显示一个箭头。

flexbox 的 flex-grow 特性似乎不会影响 after 伪元素箭头的位置。全屏时，您可以看到箭头，但是当 flex-grow 启动时，箭头保持原状并被背景色隐藏。

https://codepen.io/sherrylking/pen/MWWXEBv

.qo-tab-section {
    display: flex;
}

.qo-tab-section div {
    padding: 20px 20px 20px 20px;
    flex-basis: 50%;
}

.qo-active-tab:after {
    content:'';
    position: relative;
    border-style: solid;
    border-width: 20px 20px 0;
    border-color: #027777 transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 43px;
}

Answer 1

问题是您使用 top: 43px 作为固定位置，它会阻止箭头在重新调整大小时调整其相对于弹性项目的位置。

相反，使用箭头上的绝对定位和相对定位来设置包含块。

将此添加到您的代码中：

.qo-tab-section div {
    padding: 20px 20px 20px 20px;
    flex-basis: 50%;

    /*new */
    position: relative;
}

.qo-active-tab:after {
    content:'';
    /* position: relative; */
    border-style: solid;
    border-width: 20px 20px 0;
    border-color: #027777 transparent;
    /* display: block; */ /* not necessary */
    width: 0;
    z-index: 1;
    /* top: 43px; */

    /* new */
    position: absolute;
    top: 100%;
    left: 0;
}

.qo-tab-section {
  display: flex;
}

.qo-tab-section div {
  padding: 20px 20px 20px 20px;
  flex-basis: 50%;
  /*new */
  position: relative;
}

.qo-active-tab {
  color: white;
  background-color: #027777;
}

.qo-active-tab:after {
  content: '';
  /* position: relative; */
  border-style: solid;
  border-width: 20px 20px 0;
  border-color: #027777 transparent;
  /* display: block; */ /* not necessary */
  width: 0;
  z-index: 1;
  /* top: 43px; */
  /* new */
  position: absolute;
  top: 100%;
  left: 0;
}

.qo-purchase-area {
  background-color: #E4F6F9;
  overflow: auto;
  padding: 25px 15px 15px 15px;
  margin-top: -15px;
}

.qo-purchase-amount {
  font-weight: bold;
  font-size: 2em;
}

.float-l {
  float: left;
}

.float-r {
  float: right;
}

.qo-container {
  border: solid 3px #027777;
  padding: 15px;
}

.h1-small {
  font-size: .6em;
}

.main-button-not-selected {
  background-color: #EDEDED;
  color: #999999;
  border: solid 1px #999999;
}

.margin-r-15 {
  margin-right: 15px;
}

.qo-helptip {
  width: 20px;
  margin-bottom: 5px;
}

.qo-coverage-amount {
  background-color: #F7F6F6;
  padding-top: 15px;
  padding-bottom: 15px;
}

.qo-coverage-amount input {
  font-size: 2.35em;
  width: 6em;
  text-align: center;
}

.qo-coverage-alignment {
  float: left;
}

.qo-coverage-clear {
  padding: 5px;
  line-height: 45px;
}

.cov-a-warning:before {
  content: url("exclamation-triangle.svg");
  width: 20px;
  position: absolute;
  left: 13px;
}

.cov-a-warning {
  margin-left: 26px;
}

.qo-coverage-title {
  font-size: 1.4em;
  font-weight: bold;
}

.qo-section-body {
  font-size: 1.7em;
  padding-bottom: 120px;
  text-align: center;
}

<div class="qo-tab-section">


  <div><span class="qo-coverage-title">Title Here</span>
    <br> This content is longer than the other box. This content is longer than the other box. This content is longer than the other box. This content is longer than the other box. This content is longer than the other box. </div>


  <div class="qo-active-tab"><span class="qo-coverage-title">Title Here </span><br> small discription goes here.</div>

</div>

<div class="qo-container">

  <div class="row form-group qo-purchase-area">
    <div class="float-l qo-purchase-amount margin-r-15">4.67 / month
    </div>

    <div class="float-l margin-r-15">please note that the arrows shows under the active tab in full screen but when the flexgrow kicks into effect the possitioning of the after not longer works well. The extra growth is not considered.
    </div>

    <div class="float-r">
      <button class="main-button" type="button">Purchase</button>
    </div>


  </div>
</div>

使用 Flexbox 时伪元素隐藏后

After pseudo element hidden when using Flexbox

css

flexbox

pseudo-element

flex-grow

jsFiddle demo