Html 子div覆盖父div的宽度

我一直在寻找我问题的答案，一直在尝试一切，但迄今为止我所做的一切尝试都失败了。下面是：

我的父面板将

id

设置为

secondPanel

，其宽度由JavaScript固定

document.getElementById("secondPanel").style.width = (screen.width-12) + "px";

我没有使用“宽度：100%”，因为它会在我的视图端口底部生成一个滚动条。即使浏览器大小发生变化，我也希望布局的位置保持不变

#secondPanel{
    float: left;
    margin-top: 15px;
    padding:0px;
    border-style: solid;
    border-width:2px;
    border-color: black;
    background: red;
}

#tryP{
    float:left;
    width:200px;
    border-style: solid;
    border-width:2px;
    border-color: black;
    background: white;
}

#childDiv{
    float:left;
    border-style: solid;
    border-width:2px;
    border-color: black;
}

但是，每次我将一个子

div

放入父

div

中，并为其放置一个

宽度

，如果其

宽度小于父
宽度，则滚动条再次出现甚至。但是当我放置
p
时，滚动条不会显示。我能做些什么？我的孩子有什么问题

将childDiv宽度设置为100%


#childDiv{
宽度：100%；
浮动：左；
边框样式：实心；
边框宽度：2倍；
边框颜色：黑色；
}
尝试给出每个
位置：相对
，您应该能够使用
宽度：100%
然后tooCan you share fiddle每次我使用“width:100%”时，滚动条就会出现