Почему появляется скролл?

[Parallelogram]

Здравствуйте. Не могу понять, почему появляется скролл у страницы.
Мне необходимо, чтобы .top блок был определенной высоты, а .bottom на всю оставшуюся высоту.

<div class="general">
	<div class="right">
		<div class="top"></div>
		<div class="bottom">
			<textarea name="text" id="text"></textarea>
		</div>
	</div>
</div>

body {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

*, :after, :before {
	box-sizing: border-box;
}

.general {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	height: 100vh;
}
.right {
    display: flex;
    flex-direction: column;
    background-color: #ccc;
    flex-grow: 1;
}
.top {
	height: 30px;
	background-color: #d0d;
}
.bottom {
    height: 100%;
}
textarea {
    width: 100%;
    height: 100%;
}

https://jsfiddle.net/arbusx/xekdy7w6/

[ProgrammerMan]

Ты можешь просто использовать overflow: hidden; Вот готовый вариант - http://rapprogtrain.com/editor/code/45. Но лучше почитай про это - http://rapprogtrain.com/learn-css/co...w-property.php

[Вадим Мошев]

Вот готовый вариант - http://rapprogtrain.com/editor/code/45.

textarea у вас там не закрыт

*, :after, :before {
	box-sizing: border-box;
}

Это вы в bootstrap взяли? Сейчас придёт злой Naive сюда.
P. S. А нет, не у вас... это ТС начал...

[Naive]

Пришел, натоптал, выразил негодование, ушел)

UPD: Ладн...

Почему появляется скролл?

margin у textarea не нулевой

Сообщение от Вадим Мошев

textarea у вас там не закрыт

закроется автоматом, но правильно, конечно закрывать

Сообщение от Вадим Мошев

Это вы в bootstrap взяли? Сейчас придёт злой Naive сюда.
P. S. А нет, не у вас... это ТС начал...

0. Использование универсального селектора — отстой. Код мгновенно становится не реюзабельным, причем любой: тот что написан для бутстрапа и тот, что написан не для бутстрапа нельзя безбоязненно вставить к себе.
1. Универсальный селектор создает лишнюю нагрузку для рендера стилей: он не только пробегается по каждому элементу, но и пробегается по наследованию стилей (для box-sizing нет, у него нет наследования).
2. Псевдоэлементы before && after получив хотя-бы строчку стилей создаются, от свойства content это не зависит. (возможно это поправили в новых версиях браузеров, я не следил)
3. Это нарушает один из краеугольных принципов не только ООП, а ваще программирования: инкапсуляцию.
4. Из-за этого дерьма, когда я пишу любой виджет, я вынужден для каждого элемента явно указывать необходимый для него box-sizing. И даже еще хорошо, что только box-sizing, ибо написал скрипт, который ставит его за меня.

Бутстраповцы могли просто всем своим элементам прописать бокс, но они испортили ваще всё! У нас в команде юзают урезанный бутстрап, у которого нет универсального селектора. Сам по себе бутстрап не плох. А вот эти 3 строчки у меня и у большинства профессиональных фронтендеров и верстальщиков вызывают ярость. Призываю всех если и юзать бутстрап, то резать его также. А лучше ваще не юзать.

UPD2: overflow: hidden лучше стараться избегать по-максимуму, для рендера он довольно тяжел, потому что любой overflow создает отдельный слой рендера. Смотри лекцию ШРИ про слои.

[Parallelogram]

Сообщение от Naive

0. Использование универсального селектора — отстой. Код мгновенно становится не реюзабельным, причем любой: тот что написан для бутстрапа и тот, что написан не для бутстрапа нельзя безбоязненно вставить к себе.
1. Универсальный селектор создает лишнюю нагрузку для рендера стилей: он не только пробегается по каждому элементу, но и пробегается по наследованию стилей (для box-sizing нет, у него нет наследования).

Из всего этого я понял, что *{box-sizing: border-box;} можно использовать (но только его, потому что он без наследования). :after, :before - Нет нет и ещё рар нет.

[Parallelogram]

Сообщение от Naive

margin у textarea не нулевой

Обновил jsfiddle.net, добавил margin:0 у textarea, и это ничего не поменяло.
overflow: hidden - нельзя =(

[Parallelogram]

Короче, решил проблему.

textarea { display: block; }