html - 从较小的子宽度开始，是否可以通过仅使用相对宽度缩小浏览器窗口来将其设置为等于其父宽度？

Question

我有一个具有相对宽度的父元素。随着浏览器完全展开，其子元素的宽度变小。通过缩小浏览器，我可以使子元素保持其宽度，直到它最终成为与其父元素相同的宽度，随后的缩小导致两个元素保持相等的宽度，但我必须使用 FIXED max-width 并且不能使其适用于相对最大宽度。例如，我希望能够通过给子元素 max-width: 50% 而不是 max-width: 900px 来实现这一点。 Here is the CodePen.

HTML:

<div id="container">
<div id="firstDiv"</div>

CSS:

#container {
width:90%; 
margin: 0 auto;
height: 300px;
background-color: #2b6dad;
border: 8px solid #2b6dad;
}

#firstDiv {
max-width: 800px;      /*works for FIXED width*/
/*max-width: 50%;/*    /*Doesn't work for RELATIVE width*/
height: 100%; 
background-color: #da2225; 
margin: auto;
}

Answer 1

#container {
  width:90%; 
  margin: 0 auto;
  height: 300px;
  background-color: #2b6dad;
  border: 8px solid #2b6dad;
  overflow:hidden;
}
#firstDiv {
  min-width: 50%;      
  width: 300px;
  max-width:100%;
  height: 100%; 
  background-color: #da2225; 
  margin: auto;
  border-left: solid black 5px;
  border-right: solid black 5px;
  box-sizing: border-box;
}

<div id="container">
  <div id="firstDiv"</div>
</div>

codepen