在使用Flexbox时隐藏伪元素之后

Question

我需要两个div占用100％的宽度，理想情况下每个占用50％的宽度（但我很灵活）。在活动标签上下方显示一个箭头。

flexbox的flex-grow功能似乎不会影响伪元素后箭头的位置。在全屏模式下，您可以看到箭头，但是当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作为固定位置，可防止箭头在调整大小时相对于flex项目调整其位置。

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

将此添加到您的代码中：

.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">$134.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>

jsFiddle demo