css child div height is more than parent-CodePudding

I am trying to implement an auto-scroll to bottom feature inside the hasMessagesContainer, however because the hasMessagesContainer is larger than its parent messagePanel, the composeMessage overlaps part of the hasMessagesContainer, affecting the auto-scroll.

The hasMessagesContainer has the same size as the messagePanelContainer rather than the messagePanel div.

.messagePanelContainer{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.messagePanel{
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
}

.hasMessagesContainer{
  height: 100%;
}

<div >
   <div ></div>
   <div >
      <div >
         <div >
         //this is an antd component that has multiple Panel component that displays the messages
         </div> 
      </div>
   </div>
   <div ></div>
</div>

Any help will be greatly appreciated!

CodePudding user response：

You need to set a fix height on your message container hasMessagesContainer, with units such as px vh em rem.

Then if replace in hasMessagesContainer your height: 100%; by min-height: 100%;. Because if you keep the height 100%, with a color background, you will see it stopped by container size.

.messagePanelContainer{
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.messagePanel{
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
}

.hasMessagesContainer{
  padding: 5px;
  min-height: 100%;
  background: salmon;
}

<div >
   <div ></div>
   <div >
      <div >
         <div >
         //this is an antd component that has multiple Panel component that displays the messages
         <br><br>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id neque enim. Aliquam arcu nisi, molestie eu nunc a, ornare iaculis felis. Quisque a lectus eget mi sodales efficitur. Fusce pulvinar condimentum eros, a placerat elit elementum ut. Nunc lorem nisl, gravida a condimentum sed, iaculis venenatis ex. Donec dictum, lectus at ornare aliquam, tortor tellus accumsan turpis, sed placerat dolor mi quis nunc. Nam sed vehicula est, eget pharetra mi. Mauris sollicitudin ullamcorper purus, ac egestas quam euismod et. Pellentesque accumsan sit amet arcu sed volutpat. Cras pretium, eros et viverra scelerisque, tortor erat viverra nisl, malesuada aliquam risus arcu quis odio. In sit amet neque tristique metus fermentum bibendum non sed dolor. Fusce consectetur diam ac est sollicitudin, in scelerisque mauris auctor. Donec accumsan lorem et euismod volutpat. Phasellus sit amet lacus vulputate, porttitor velit tincidunt, varius tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br>
Nam a sapien efficitur, dictum ante ac, faucibus turpis. Nam tincidunt auctor nisi, ac mattis magna egestas a. Duis semper vestibulum mauris non hendrerit. Sed sed facilisis mi. Vestibulum dapibus, mauris dictum dictum dictum, diam arcu sollicitudin magna, non accumsan risus libero vel nunc. Integer in erat tristique, maximus odio quis, egestas tellus. Aliquam tincidunt nisi id diam congue tempus. Suspendisse et neque a purus mattis aliquet. Nullam nisi ligula, ultrices eleifend orci ut, sodales efficitur felis. Nullam pellentesque ex eu ultricies laoreet. Suspendisse potenti. Aliquam tincidunt finibus mi in venenatis. Ut dapibus tellus risus, eget accumsan nisl venenatis venenatis. Nulla rutrum massa id elementum pharetra. Cras non laoreet arcu, nec congue turpis. Donec eu orci a felis porta viverra.
<br><br>
Vestibulum ut est ex. Suspendisse nec pretium ligula. Sed ut posuere nibh. Curabitur lectus est, luctus in metus id, imperdiet malesuada felis. Donec vehicula, neque suscipit venenatis auctor, enim nunc dictum urna, sed tincidunt lorem orci quis ipsum. Nulla vulputate ut justo sed placerat. Curabitur id rhoncus nisl. Praesent tortor nisi, consectetur sit amet sollicitudin sed, ullamcorper non massa.
         </div> 
      </div>
   </div>
   <div >
    <textarea placeholder="composeMessage" style="width:calc(100% - 8px); height:40px;"></textarea>
   </div>
</div>

CodePudding user response：

Looks fine. Doesn't it? Maybe the problem is within your other code correlating with it?

.messagePanelContainer{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background-color: #ffdd00;
}

.messagePanel{
  flex-grow: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #000;
}

.messageTitleContainer{
  background-color: #4089ff;
}

.hasMessagesContainer{
  height: 100%;
  background-color: #00ff88;
}
.composeMessage{
  background-color: #cf04ff;
}

<div >
   <div >//title</div>
   <div >
      <div >
         <div >
         //this is an antd component
         <br/>//that has multiple Panel component 
         <br/>//that displays the messages
         </div> 
      </div>
   </div>
   <div >//ComposeMessage</div>
</div>

CodePudding user response：

You should put the scroll on your has messages container and position it absolutely inside the flex grow message panel:

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

.messagePanelContainer {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.messagePanel {
  flex-grow: 1;
  position: relative;
}

.hasMessagesContainer {
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div >
  <div ></div>
  <div >
    <div >
      <div >
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
        //this is an antd component that has multiple Panel component that displays the messages<br>
      </div>
    </div>
  </div>
  <div ></div>
</div>