我正在尝试创建一个可以包含未定义数量的对象的菜单;所述对象的大小取决于可用的宽度（菜单的宽度）。菜单的高度不应超过某个值，并且仍然包含所有子对象，这意味着子元素可以缩小，同时保持比例，但绝不会溢出“包含区域”。
像这样的东西：
add = () => {
const menuObject = document.createElement('div')
menuObject.classList.add('menu-element')
const menu = document.getElementById('menu')
menu.appendChild(menuObject)
}*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
button{
padding: 40px;
}
.bounds{
position: absolute;
border: 2px dashed black;
width: 10%;
right: 8px;
bottom: 8px;
height: 60%;
box-sizing: content-box;
}
.menu{
position: absolute;
width: 10%;
right: 10px;
bottom: 10px;
background-color: chocolate;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.menu-element{
width: 100%;
background-color: dodgerblue;
margin: 5%;
}
.menu-element::before{
content: "";
padding-top: 100%;
display: block;
}<body>
<button onclick="add()">Add item</button>
<div class="bounds">
Items should never leave this box
</div>
<div id="menu" class="menu"></div>
</body>我已经尝试将max-height属性设置为菜单，但这不会修改其宽度，最终是控制整个大小调整架构的值。我正在寻找一个只有CSS的解决方案，如果它尽可能的话，任何可以解决这个问题的灯都会非常感激。
如果您希望菜单包含在某些边界内，则应将其放在这些边界内，以便它可以扩展到它们中。
由于菜单是display: flex，我们可以让子元素通过添加flex: 1来共享菜单中的可用空间。
如果需要，我们可以选择在菜单项中添加max-height值。
add = () => {
const menuObject = document.createElement('div')
menuObject.classList.add('menu-element')
const menu = document.getElementById('menu')
menu.appendChild(menuObject)
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
padding: 40px;
}
.bounds {
position: absolute;
border: 2px dashed black;
width: 10%;
right: 8px;
bottom: 8px;
height: 60%;
box-sizing: content-box;
}
.menu {
width: 100%; /* Expand into boundaries */
height: 100%; /* Expand into boundaries */
background-color: chocolate;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.menu-element {
flex: 1; /* Makes elements expand into available space */
max-height: 25%; /* Height cap in case we want to have a set initial size */
width: 100%;
background-color: dodgerblue;
outline: 1px solid red; /* Help visualize boundaries */
}<button onclick="add()">Add item</button>
<div class="bounds">
<div id="menu" class="menu"></div> <!-- Move menu into boundaries -->
</div>将容器div的溢出设置为overflow: auto
.bounds { overflow: auto; } // for example
如果内部的项目退出容器边界，这将给出滚动条。
此外，flex-shrink属性指定项目相对于同一容器内的其他灵活项目的收缩方式。如果元素不是灵活项，则flex-shrink属性不起作用。
使用display: flex;设置灵活的元素
flex-shrink: number|initial|inherit; // Syntax
例如，如果你有灵活的段落：
p:nth-of-type(2){flex-shrink: 3;} //Second flex-item shrinks 3x more than the rest
number =一个数字，指定项目相对于其他灵活项目的收缩程度。默认值为1。
initial =将此属性设置为其默认值。
inherit =从其父元素继承此属性。
https://www.w3schools.com/CSSref/css3_pr_flex-shrink.asp柔性收缩指南