Css 如何使用flex调整三个div以占据屏幕的精确宽度？

我有三张并列的唱片。左边的应该占屏幕的25%。中间的那个应该占据一个固定的大小，比如说50个像素（可能会改变）。第三个应占据剩余空间，但不得超过屏幕大小。当我在上面加载一个大图像时，它超过了屏幕。我试过

flex:1自动和
柔性收缩：1但两者都是无用的。我希望滚动条出现在
d3
div上，而不是出现在
body
上


正文{
显示器：flex；
保证金：0；
宽度：100%；
}
#d1{
背景色：红色；
弹性：10自动；
宽度：25%；
}
#d2{
背景颜色：绿色；
}
#d3{
背景颜色：蓝色；
弹性收缩：1；
}
#d3a{
背景色：青色；
边缘：1米；
宽度：1000px；
}

1.
2.
3a
第一个孩子必须没有
flex
，只有宽度（单位%）。
第二个子项也将没有
flex
，并且宽度为px（因为您希望它固定）。
最后，第三个孩子将拥有
flex:1
，以便占据所有剩余空间

如果图像使第三个子对象比屏幕宽，请输入
宽度：100%
 
溢出：自动在最后一个元素上