Как сделать чтобы блок не сползал?

Question

[SHentai]

Здравствуйте.

Уже много времени не как не могу допереть, как предотвратить сползание элементов блоки при уменьшение размера странице.
вот он сползает, а не должен.
Как видно на гифке, это происходи когда и кнопки смешаются. Как это поправить?
Мне нужно чтобы независимо от того как едут кнопки выше, блок бы не сползал за приделы class body, но думаю по гифке Вам понятно что там не так.

Ссылка на пример: https://codepen.io/Jebati/pen/vWyVKZ

Буду благодарен за любую помощь, спасибо.

Comments

[SHentai]

Денис Ефремов, Хорошо, я у себе поменял везде где в CSS я использовал адресатом ID, а не CLASS, но всё так же осталось.

[Ankhena]

Я не вижу, чтобы что-то выползало за .body, но если правильно поняла, то либо уменьшайте кнопки (например, заменяйте на значки), чтобы они всегда умещались в одну строчку либо задавайте сразу двойную высоту строки.

А еще вряд ли пользователи так двигают окно браузера, этим страдает только известно кто.

[Сергей]

Так в чем проблема?
Наоборот же хорошо, что блоки уходят один под другой. Это адаптивный дизайн. Так правильно.

[SHentai]

Ankhena, Дело в том, что это файловый менеджер, например с телефона, когда ты забрёл в дебри каталога, то файлы сползут за пределы body (class).

[SHentai]

Сергей, Мне нужно чтобы они когда становится например больше элементов в пути, не сползали за края body, вот сейчас я изменил немного пример, и там я зашел в дебри, вот теперь на телефоне всё сползает всегда.

[SHentai]

Вот, вот этого не должно быть: , а он падла за пределы своего блока сползает.

[Ankhena]

SHentai, либо вы странно объясняете либо тут что-то не то.
У items стоит overflow, размеры не больше .body. Обведите .body красной рамкой. И сделайте нижний padding несколько точек.

[SHentai]

Ankhena, Я изменил, пример сохранил, можете посмотреть.

[Сергей]

SHentai, задайте min-height блоков с файлами?
Есть где верстка в сети?
Я мог бы глянуть фаербагом

[SHentai]

Сергей, Есть - jebati.ru/files.php , min-height пробовал(

[SHentai]

Денис Ефремов, только тем что он потом за границы не уходит вне, но снова же, файл так же сползает и его в низ если матнуть, не до конца видно.

[SHentai]

Денис Ефремов, Они в этом случае бесполезны, если по логике я зайду в ещё другие папки, то в пути выше будет больше элементов (я про тот путь id="path_container"), то всё поплывёт все равно.

[Ankhena]

SHentai, флекс спасет

[Ankhena]

SHentai, обновила ответ с примером

Answer 1

[Ankhena]

SHentai,
Я поняла, что не так.

Варианты решения:

1. уменьшайте кнопки (например, заменяйте на значки при разных media), чтобы они всегда умещались в одну строчку
2. задавайте сразу двойную высоту строки с кнопками
3. используйте flex
4. иcпользуйте media queries при разной ширине экрана задавайте разную высоту блокам.

И комбо этих вариантов.

С флексами https://jsfiddle.net/pag705Ln/

Comments

[SHentai]

Спасибо Вам огромное))

Answer 2

[dsemagin]

вместо этого

html {
			overflow: hidden;
		}
		.body{
			margin: 10px;
			padding: 10px;
			background-color: #fff;
			box-shadow: 5px 5px #CCCCCC;
			width: auto;
		  height: calc(100vh - 40px);
		  border: 1px solid #f00;
		  bottom: 40px;
		}

вот это

.body{
		  margin: 10px;
		  padding: 10px;
		  background-color: #fff;
		  box-shadow: 5px 5px #CCCCCC;
		  width: auto;
		  height: calc(100vh - 40px);
		  border: 1px solid #f00;
		  bottom: 40px;
                  overflow: hidden;
		}

Comments

[SHentai]

jebati.ru/files.php зайди, я изменил. Видишь в чём там прикол, при сжатие ширены, нижний элемент (который в низу), уже на половину не виден.

Answer 3

[Сергей]

Я просто в .body убрал Ваше значение height с calc и добавил 100vh
И все заработало.

.body{
			margin: 10px;
			padding: 10px;
			background-color: #fff;
			box-shadow: 5px 5px #CCCCCC;
			width: auto;
		  height: 100vh;
		  border: 1px solid #f00;
		  bottom: 40px;
		}