I would like to make ul's overflow account for the borders of div it is contained in.
I have tried adding padding with the same px measurement as border tag.
main.css:
.resizable {
background: black;
width: 80%;
height: 50%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.resizable .resizers {
width: 100%;
height: 100%;
border: 3px solid #4286f4;
box-sizing: border-box;
}
.resizable .resizers .resizer {
width: 10px;
height: 10px;
border-radius: 50%; /* Magic to turn square into circle. */
background: white;
border: 3px solid #4286f4;
position: absolute;
}
.resizable .resizers .resizer.top-left {
left: -5px;
top: -5px;
cursor: nwse-resize;
}
.resizable .resizers .resizer.top-right {
right: -5px;
top: -5px;
cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-left {
left: -5px;
bottom: -5px;
cursor: nesw-resize;
}
.resizable .resizers .resizer.bottom-right {
right: -5px;
bottom: -5px;
cursor: nwse-resize;
}
#npc_events {
width: 100%;
height: 100%;
flex-grow: 1;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid lightgrey;
overflow-y: scroll;
}
#npc_events li {
padding: 10px 10px 10px 10px;
color: white;
}
index.html:
<body>
<div id='div_npc_chat' class='resizable'>
<div class='resizers'>
<div class='resizer top-left'></div>
<div class='resizer top-right'></div>
<div class='resizer bottom-left'></div>
<div class='resizer bottom-right'></div>
<div class="chat-wrapper">
<form id="npc_chat-form">
<input id="npc_chat" autocomplete="off" title="chat"/>
<button id="npc_say">Say</button>
</form>
</div>
<ul id="npc_events"></ul>
</div>
</div>
</body>
I expected the text, which is
- elements of contained in to not appear above div's blue borders, but I got this:
https://cdn.discordapp.com/attachments/401030271417188355/613446713629343756/unknown.png
Aucun commentaire:
Enregistrer un commentaire