<!DOCTYPE html>
<style>
#column {
    display: flex;
    flex-direction: column;
    border: 5px solid yellow;
}

#row {
    display: flex;
    flex-direction: row;
    border: 5px solid blue;
}

.item {
    border: 5px solid green;
}
</style>
<body>
<div id="column">
    <div id="row">
        <div class="item">This text should not overflow its box</div>
    </div>
</div>
<script>
var columnBox = document.getElementById("column");
columnBox.offsetHeight;
columnBox.style.width = "200px";
</script>