html flex: граница вокруг элемента без расширения по высоте

В следующем примере граница находится не вокруг синего прямоугольника, а распространяется на всю высоту окна.

Любая подсказка, чтобы сделать рамку вокруг синего поля?

Заметки:

  • html и определения тела не могут быть изменены.
  • отступ в "div1" не может быть изменен.
  • Я пробовал разные комбинации с "display:inline-block" и т. д., но безуспешно.
  • Весьма вероятно, что этот вопрос уже задавался. Однако мои поиски ответа не увенчались успехом. Хороший "дублирующий" намек приветствуется.

html {
	height: 100%;
}

body {
	height: 100%;
 	margin: 0; 
	display: flex;
	flex-direction: row;
}

#div1 {
	padding: 2em; 
	border: 1px solid green;
}

#blueDiv {
	width: 5em;
	height: 5em;
	background-color: blue;
}
<!DOCTYPE html>
<html>
<body>
		<div id="div1">
				<div id="blueDiv"></div>
		</div>
</body>
</html>


html css flexbox
person pasaba por aqui    schedule 08.07.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Почему бы вам не использовать outline и outline-offset непосредственно в #blueDiv?

html {
	height: 100%;
}

body {
	height: 100%;
 	margin: 0; 
	display: flex;
	flex-direction: row;
}

#div1 {
	padding: 2em;
}

#blueDiv {
	width: 5em;
	height: 5em;
	background-color: blue;
	/* OUTLINE */
	outline: 1px solid green; 
	outline-offset: 5px; 
}
<!DOCTYPE html>
<html>
<body>
		<div id="div1">
				<div id="blueDiv"></div>
		</div>
    <p>There is a green border around the blue box, distant 5 pixels.</p>
</body>
</html>

person DanieleAlessandra    schedule 08.07.2019
comment
Почему бы вам не использовать контур и смещение контура непосредственно в #blueDiv? Потому что я не знал, что они существуют. Большое спасибо за предложение. - person pasaba por aqui; 08.07.2019

arrow_upward
-2
arrow_downward

Добавьте это в свой код:

* {
  box-sizing: border-box;
}
person Albert    schedule 08.07.2019
comment
Вы тестировали его? - person pasaba por aqui; 08.07.2019