Make it so parent element not grow when child expands

Question

I have a flex-box layout where I'm using flex-grow: 1 on multiple elements in order to distribute the layout evenly. However, when I add contents to one of the elements, it immediately expands out and ruins the even layout.

How can I make it so that the parents stay evenly distributed? Or would it be easier to just change it to width: 50% in order to fix that problem? Below is the code.

.app-container {
  display: flex;
  background: orange;
  min-height: 100vh;
  min-width: 100vw;
}

.sideBar-container {
  display: flex;
  background: pink;
  width: 10%;
}

.info-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100vh;
}

.top-container {
  display: flex;

  background: green;
  flex-grow: 1;
}
.bottom-container {
  flex-grow: 1;
  display: flex;
  background: wheat;
}

.top-left {
  display: flex;
  flex-direction: column;
  background: blue;
  flex-grow: 1;
}

.top-right {
  display: flex;

  background: red;
  flex-grow: 1;
}

.top-two {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-grow: 1;
  background: gold;
}

.bottom-two {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-grow: 1;
  background: cornflowerblue;
}

.number-appts {
  background: aqua;
  flex-basis: 35%;
  height: 45%;
}
.projected-revenue {
  background: aquamarine;
  flex-basis: 45%;
}

.projected-costs {
  background: burlywood;
}

.projected-profit {
  background: darkgray;
}

.appointment-consult {
  background: seagreen;
}

<div className="app-container">
      <div className="sideBar-container">
      </div>
      <div className="info-container">
        <div className="top-container">
          <div className="top-left">
            <div className="top-two">
              <div className="number-appts">test</div>
              <div className="projected-revenue">this</div>
            </div>
            <div className="bottom-two">
              <div className="projected-costs">here</div>
              <div className="projected-profit">testing</div>
            </div>
          </div>
          <div className="top-right">
            <div className="appointment-consult"></div>
          </div>
        </div>
        <div className="bottom-container"></div>
      </div>
    </div>

Answer 1

I figured it out. Changed my flex-grow: 1 to flex:1 as creating a rule where flex-basis is now 0px rather than auto stops the css from looking inward at the content