Flexbox额外空间

Question

我在flexbox中的布局存在一些问题

我不明白为什么蓝色按钮会占用额外的空间。

function App() {
  return (
    // eslint-disable-next-line react/jsx-filename-extension
    <div>
      {/* <div className="mainContainer">
        <Header username="Raimondo Pugliesi" />
      </div> */}
      <div>
        <BluRow allocationCard blueButtons availableMoney />
      </div>
      <div className="frontContainer">
        <div className="leftScreen">
          <ChangeRequest inRelease title="CRM Evolution" requestId="1223" cost="1300" supervisor="Alberto rossi" buttonTitle="in Analisi" />
          <ChangeRequest title="Cheope ELE" requestId="1124" cost="600" supervisor="Mario rossi" buttonTitle="valutazione" />
          <ChangeRequest title="Cheope ELE" requestId="1124" cost="600" supervisor="Mario rossi" buttonTitle="valutazione" />
        </div>
        <div className="rightScreen">
          <LateralSearch />
        </div>
      </div>
    </div>
  );
}

这是

的相对css

.frontContainer {
    display: flex;
    align-items: center;
}

.leftScreen {
  flex: 1.5;
  border-right: 3px solid #D8D8D8;
}

.rightScreen{
  flex: 1;
  align-self: flex-start;
}

关于下面的组件蓝色行，您将找到他的html

class BluRow extends Component {
  render() {
    const {
      release,
      allocationCard,
      blueButtons,
      availableMoney,
    } = this.props;

    return (
      // eslint-disable-next-line react/jsx-filename-extension
      <div>
        <div className="rowTop">
          {release ? <Release releaseNumber="Release #5_2019" expirationDate="19/06/2019" /> : null }
          {availableMoney ? <AvailableMoney amount="23.922" /> : null}
          <div className="gpContainer">
            {blueButtons ? <GpButton buttonName="RICHIEDI EXTRA BUDGET" /> : null }
            {blueButtons ? <GpButton buttonName="CONFERMA LISTA ATTIVITA'" /> : null}
          </div>
        </div>
        <div className="row">
          {allocationCard ? <AllocationCard name="Mario rossi" totalAmount="10.764,90" totalAllocated="14.532,20" /> : null}
          {allocationCard ? <AllocationCard name="Alberto rossi" totalAmount="10.764,90" totalAllocated="14.532,20" /> : null}
          <MyCr percentage={{ amount: 50 }} approved={{ amountApproved: 15 }} warning={{ warningAlert: 5 }} toAnalyze={{ toBeAnalyzed: 3 }} />
        </div>
      </div>
    );
  }
}

这是链接到blueRow组件的css

.row {
  display: inline-flex;
  flex-direction: row;
  width: 100%;
  background-color: #E5F7FD;
  padding: 30px 0px 30px 0px;
}

.rowTop {
  background-color: #E5F7FD;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.gpContainer {
  display: flex;
  flex-direction: column;
}

预期行为是什么？

我需要使蓝色按钮与搜索输入对齐，而不需要页面的额外空间。

我真的不知道我把这多余的空间放在哪里了。因为如果我尝试从代码中剪掉蓝色按钮的行，那么我仍然会在输入的右侧继续保留额外的空间。