When I have a details element and try to set its height to 100%, there is some space below the element, even when tested with a textarea and div.
https://i.sstatic.net/zZszF.png
I am specifically talking about the space between the red border of the .log element and the black border of the details element.
details {
width: calc(100vw - 20px);
box-sizing: border-box;
border: 1px solid black;
padding: 0;
}
.log {
width: 100% !important;
height: 100%;
overflow-y: scroll;
box-sizing: border-box;
border: none;
border-bottom: 1px solid red;
outline: none;
min-height: 50px;
display: inline-block;
}<details>
<summary>Connection Log</summary>
<div class="log" readonly>[08:33:43]: Connection</div>
</details>
<details>
<summary>Connection Log</summary>
<textarea class="log" readonly>[08:33:43]: Connection</textarea>
</details>Is there a way to remove that extra space? I need this because I want to add a resizable corner (using a textarea).