如何使子div适合其父卷轴的非滚动宽度？

Question

父div有overlflow：auto，并由child2扩展。

我想设置child1宽度以适合父潜水非滚动区域。 这是一个演示：

https://jsbin.com/hitasupawa/edit?html,output

更新： 对不起我对这个问题的描述不好。 父母的大小是动态的。我们假设，现在父宽度是500px，父节点有一个滚动条。有大约400px的内容，不必滚动查看。我想将child1的宽度设置为400px。

让我们假设，父级的宽度增加到550px，大约450px不需要滚动查看，然后我想将子项设置为450px。

如果没有纯css解决方案，我可以添加一段JavaScript代码来监听resize事件，但是如何获得不包括滚动区域的宽度？

感谢。

<style>
    .parent {
        border: 1px solid yellowgreen;
        height: 400px;
        overflow: auto;
        padding: 5px;
        width: 400px;
    }



    .child1{
        border: 1px solid blueviolet;
        height: 200px;
        width: 200px;
        margin: 5px;
    }

    .child2 {
        border: 1px solid blueviolet;
        height: 50px;
        width: 500px;
        margin: 5px;
    }

</style>

<div class="parent">
    parent

    <div class="child1">child2</div>

    <div class="child2">child2</div>



</div>