Css 使用“停止浮动div”；固定的；从容器中漂浮出来的尺寸

我有一个

容器，具有特定的

最大宽度

最大宽度：300px；
保证金：4em自动；
边框：1px纯黑；

它包含两个内容：1）文本，2）带

float：右；
宽度：150px；

请参阅我的示例

缩小窗口宽度时，浮动的

（如预期）会延伸到包含

的窗口之外，超出其左边框。但是，我希望它的宽度减小，这样它就不会离开

的外部边界。换句话说，浮动元素的宽度规格应以外部div的足够宽度为条件。在CSS中是否有实现这一点的方法？

确定：

宽度：50%；
最大宽度：150px；

另一个选项是

媒体

查询。下面是一个基于您提供的代码的示例。请记住，

.divright

元素只会收缩到

div

中最长的单词那么小

---

>>谢谢你的回复。虽然这确实在某种程度上起作用，但这并不是我所需要的。除非外部

div

不够大，否则内部

div

的宽度通常不应该是相对的，而应该正好是150px。在这种情况下，我希望它与containing

div一起缩小。你知道有没有办法做到这一点吗？将
50%
更改为
100%
：）
.divout {
    max-width: 300px;
    margin: 4em auto;
    border: 1px solid black;
}
.divright {
    float: right;
    max-width: 150px;
    margin-right: 1.25em;
    border: 1px solid black;
}
@media screen and (max-width: 225px) {
    .divright {
        margin-left: 1.25em;
    }
}