SOURCE

let div = document.getElementById('oneDiv');
let tdClientWidth = document.getElementById('client-width');
let tdClientHeight = document.getElementById('client-height');
let tdOffsetWidth = document.getElementById('offset-width');
let tdOffsetHeight = document.getElementById('offset-height');
tdClientWidth.innerHTML=div.clientWidth;
tdClientHeight.innerHTML=div.clientHeight;

tdOffsetWidth.innerHTML = div.offsetWidth;
tdOffsetHeight.innerHTML = div.offsetHeight;

function $(id){
    return document.getElementById(id);
}

function clientSize(element){
    
    return {
        client:{
            width:element.clientWidth,
            height:element.clientHeight
        }
    }
}
function offsetSize(element){
    return {
        offset:{
            width:element.offsetWidth,
            height:element.offsetHeight
        }
    }
}

<div id="oneDiv">
<!-- <div class="inner"></div> -->
    <ul>
        <li><a href="">111</a></li>
        <li><a href="">222</a></li>
        <li><a href="">333</a></li>
        <li><a href="">444</a></li>
        <li><a href="">555</a></li>
    </ul>
</div>
<h5>DIV WIDTH AND HEIGHT</h5>
<table>
    <tr>
        <td>client width</td>
        <td id='client-width'></td>
        <td>client height</td>
        <td id='client-height'></td>
    </tr>
     <tr>
        <td>offset width</td>
        <td id='offset-width'></td>
        <td>offset height</td>
        <td id='offset-height'></td>
    </tr>
</table>
<h5>UL WIDTH AND HEIGHT</h5>
<table>
    <tr>
        <td>client width</td>
        <td id='client-width-u'></td>
        <td>client height</td>
        <td id='client-height-u'></td>
    </tr>
     <tr>
        <td>offset width</td>
        <td id='offset-width-u'></td>
        <td>offset height</td>
        <td id='offset-height-u'></td>
    </tr>
</table>

*{
    box-sizing: border-box;
}
#oneDiv{
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid lightgreen;
    margin: 20px;
    background: lightskyblue;
}
table{
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
}
table td{
    border: 1px solid #ddd;
    padding: 5px 10px;
}
.inner{
    background: yellow;
    width: 100%;
    height: 100%;
}
ul{
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
}
ul li{
    display: inline-block;
    width: 180px;
    background: red;
}