Как уменьшить, используя CSS, ширину div, когда его максимальная высота достигнута? - PullRequest
Новая
       4

Как уменьшить, используя CSS, ширину div, когда его максимальная высота достигнута?

0 голосов
/ 14 апреля 2019

Я пытаюсь создать меню, которое может содержать неопределенное количество объектов;размеры указанных объектов зависят от доступной ширины (ширины меню).Высота меню никогда не должна превышать определенного значения и по-прежнему содержать все дочерние объекты, то есть дочерние элементы могут уменьшаться при сохранении пропорций, но никогда не выходить за пределы «области содержания».

Примерно так: 

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, если оно вообще возможно, и любой свет, который можно пролить на этот вопрос, будет принят с благодарностью.

Ответы [ 2 ]

1 голос
/ 14 апреля 2019

Если вы хотите, чтобы меню содержалось в определенных границах, его следует поместить в эти границы, чтобы оно могло расширяться в них.

Поскольку меню 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>
0 голосов
/ 14 апреля 2019

Установить переполнение контейнера 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

число = Число, указывающее, насколько элемент будет уменьшаться относительно остальных гибких элементов. Значение по умолчанию: 1.

initial = Устанавливает для этого свойства значение по умолчанию.

наследовать = наследует это свойство от своего родительского элемента.

https://www.w3schools.com/CSSref/css3_pr_flex-shrink.asp гибкая термоусадочная направляющая

https://www.w3schools.com/CSSref/pr_pos_overflow.asp направляющая переполнения

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...