Why is the inner div comming out of the parent div in this CSS?

Question

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: "#00b7ff"
}

#content {
  background-color: aquamarine;
  width: 800px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid blueviolet;
}

#room {
  background-color: burlywood;
  margin-bottom: 1em;
}

#messages {
  width: 690px;
  height: 300px;
  overflow: scroll;
  background-color: cadetblue;
  margin-bottom: 1em;
  margin-right: 10px;
  border: 2px solid blue;
}

<div id='content'>
  <div id='room'></div>
  <div id='room-list'></div>
  <div id='messages'></div>

  <form id='send-form'>
    <input id='send-messsage' />
    <input type=s ubmit id='send-button' value='Send' />

    <div id='help'>
      Chat commands:
      <ul>
        <li>Change nickname: <code>/nick [username]</code> </li>
        <li>Join/create room: <code>/join [room name]</code> </li>
      </ul>
    </div>

  </form>

</div>

Results in:

Please explain why is the inner rectangle coming out and what can be done to prevent it?

@techie_questie the code was not being displayed properly. Please see it again now. — Aquarius_Girl, Feb 11 '21 at 03:06
300px + something inside 300px will for sure create an overflow — Temani Afif, Feb 11 '21 at 08:34

score 2 · Accepted Answer · edited Feb 11 '21 at 06:48

I believe this might help:

If we reduce the height of #message to 282px it will align properly. Because the above div which is #room is taking 1em = 16px and the #content is taking 2px border. so total 18px it is coming out of the parent div.

I have tried the changes it is working fine.

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: "#00b7ff"
}

#content {
  background-color: aquamarine;
  width: 800px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid blueviolet;
}

#room {
  background-color: blurrywood;
  margin-bottom: 1em;
}

#messages {
  width: 690px;
  height: 282px;
  overflow: scroll;
  background-color: cadetblue;
  margin-bottom: 1em;
  margin-right: 10px;
  border: 2px solid blue;
}

<div id='content'>
  <div id='room'></div>
  <div id='room-list'></div>
  <div id='messages'></div>

  <form id='send-form'>
    <input id='send-messsage' />
    <input type=s ubmit id='send-button' value='Send' />

    <div id='help'>
      Chat commands:
      <ul>
        <li>Change nickname: <code>/nick [username]</code> </li>
        <li>Join/create room: <code>/join [room name]</code> </li>
      </ul>
    </div>

  </form>

</div>

score 1 · Answer 2 · answered Feb 11 '21 at 06:52

1

  #content{
    overflow:hidden;
    }
#messages{
line-height:50%;
}

answered Feb 11 '21 at 06:52

احہٰ۪۫مہٰ۪۫د ﹻٰ۪۫ﹻٰ۪۫ﹻ

11
1

score 0 · Answer 3 · answered Feb 11 '21 at 06:09

0

The #message div is too big.
The default overflow property of the parent div is evidently set to visible.

Now, as for how to fix it, it depends on what you are trying to do. But those are the two contributing factors.

answered Feb 11 '21 at 06:09

coreyp_1

319
1
8

I want to fit the inner div inside the boundaries of the parent div. – Aquarius_Girl Feb 11 '21 at 06:26

Why is the inner div comming out of the parent div in this CSS?

3 Answers3