Question

我正在尝试创建一个菜单，其中可以包含未定义数量的对象；所述对象的大小取决于可用宽度（菜单的宽度）。菜单的高度不得超过特定值，并且仍应包含所有子对象，这意味着子元素可以缩小，同时保持比例，但决不要溢出“包含区域”。

类似这样的东西：

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的解决方案，如果有可能的话，那么在此问题上可以发现的任何想法将不胜感激。

Answer 1

如果您希望菜单包含在某些范围内，则应将其放置在这些范围内，以便可以扩展到这些范围内。

由于菜单为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>

Answer 2

将容器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伸缩收缩指南

https://www.w3schools.com/CSSref/pr_pos_overflow.asp溢出指南

一旦达到最大高度，如何使用CSS减小div的宽度？

2 个答案: