Html 最小宽度和宽度的共存

我在使

rem

中的

min width

与百分比宽度共存时遇到一些问题。我想知道是否有一个简单的方法来解决这个问题，仍然保持最小宽度+宽度

<div class="container">
    <div class="first">
    </div>
    <div class="second">
    </div>
    <div class="third">
    </div>
</div>


.container{
    min-width:20rem;
    width:80%;
    border: 1px solid black;
    height:50px;
}
.first{
    min-width:3rem;
    width:15%;
    background:red;
    height:50px;  
    float:left;
}
.second{
    min-width:10rem;
    width:65%;
    height:50px;   
    background:yellow; 
    float:left;
}
.third{
    min-width:7rem;
    width:20%;
    background:green;   
    height:50px;
    float:left;
}

.集装箱{
最小宽度：20rem；
宽度：80%；
边框：1px纯黑；
高度：50px；
}
.首先{
最小宽度：3rem；
宽度：15%；
背景：红色；
高度：50px；
浮动：左；
}
.第二{
最小宽度：10雷姆；
宽度：65%；
高度：50px；
背景：黄色；
浮动：左；
}
.第三{
最小宽度：7雷姆；
宽度：20%；
背景：绿色；
高度：50px；
浮动：左；
}

如果您想在移动设备中查看网站时使其更具响应性，请尝试使用css媒体查询

请参见此处的简单教程

如果你真的想深入了解，这将是一个很大的帮助：

CSS技巧对于学习CSS方面的任何东西都非常有帮助