Element does not expand to fill parent flex div-CodePudding

html,
body {
  margin: 0;
  height: 100%;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: #2D4256;
}

.nav-centre {
  margin: 0 auto;
  width: 40%;
  height: 100%;
}

.nav-container {
  display: flex;
  height: 100%;
  align-items: center;
  /* vertically centre */
}

.nav-item {
  color: white;
  width: 40px;
  text-align: center;
}

.main-content {
  height: calc(100% - 50px);
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow-y: overlay;
  display: flex;
  justify-content: center;
}

.main-wrap {
  width: 40%;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.box {
  width: 200px;
  height: 200px;
  background: white;
  border: 1px solid black;
  margin: 10px;
}

<body>
  <div >
    <div >
      <div >
        <div >1</div>
        <div >2</div>
        <div >3</div>
        <div >4</div>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>
</body>

The main-wrap div is not expanding to fill the parent main-content div, how can I get the main-wrap element to expand to the full height of the parent?

https://codepen.io/woooof/pen/VwBLprj

CodePudding user response：

One way to fix it is to declare overflow-y: scroll; to .main-wrap.

html,
body {
  margin: 0;
  height: 100%;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: #2D4256;
}

.nav-centre {
  margin: 0 auto;
  width: 40%;
  height: 100%;
}

.nav-container {
  display: flex;
  height: 100%;
  align-items: center;
  /* vertically centre */
}

.nav-item {
  color: white;
  width: 40px;
  text-align: center;
}

.main-content {
  height: calc(100% - 50px);
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow-y: overlay;
  display: flex;
  justify-content: center;
}

.main-wrap {
  overflow-y: scroll;
  width: 40%;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.box {
  width: 200px;
  height: 200px;
  background: white;
  border: 1px solid black;
  margin: 10px;
}

<body>
  <div >
    <div >
      <div >
        <div >1</div>
        <div >2</div>
        <div >3</div>
        <div >4</div>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>
</body>

You can read more about overflow on MDN

CodePudding user response：

The .main-wrapper is getting by default display:block, which doesn't match with the display:flex parent.

To get the value from the parent, you can use display: inherit. Once done, the elements inside won't respect their width. To fix that, you must wrap the elements, and for making it total height, You can use max-content.

.main-wrapper {
  display: inherit;
  flex-wrap: wrap;
  height: max-content;
}

Result:

html,
body {
  margin: 0;
  height: 100%;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: #2D4256;
}

.nav-centre {
  margin: 0 auto;
  width: 40%;
  height: 100%;
}

.nav-container {
  display: flex;
  height: 100%;
  align-items: center;
  /* vertically centre */
}

.nav-item {
  color: white;
  width: 40px;
  text-align: center;
}

.main-content {
  height: calc(100% - 50px);
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow-y: overlay;
  display: flex;
  justify-content: center;
}

.main-wrap {
  width: 40%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  display: inherit;
  flex-wrap: wrap;
  height: max-content;
}

.box {
  width: 200px;
  height: 200px;
  background: white;
  border: 1px solid black;
  margin: 10px;
}

<body>
  <div >
    <div >
      <div >
        <div >1</div>
        <div >2</div>
        <div >3</div>
        <div >4</div>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>
</body>