0

Как бы все работает нормом но появляется некий отступ на других элементов когда двай таких inline-flex контейнеры никаких проблем!

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}


.flex-container{
  outline: 1px solid #f00;
	display: inline-flex;
  max-width: 200px;
}

.boxes{
	outline: 1px solid #f00;
	background: #6AD0B5;

}


span{
	outline: 1px solid ;
	display: inline-block;
  width: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>flexbox</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="flex-container">
		<div class="boxes"> quam, sapiente dolorem, rem expedita, veniam dicta obcaecati sit, quod voluptatum ipsa iusto neque cupiditate iure reiciendis?</div>
    <div class="boxes"> quam, sapiente dolorem, rem expedita, veniam dicta obcaecati sit, quod voluptatum ipsa iusto neque cupiditate iure reiciendis?</div>
	</div>

	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, dolorum!</span>



</body>
</html>

1 ответ 1

0

У меня была аналогичная проблема, только оба соседствующих элемента были inline-flex. Так как элементы в том числе обладают инлайновыми свойствами, то мне помогло vertical-align: top (достаточно добавить одному из элементов). На твоем примере: https://codepen.io/diana_belka/pen/OJyOJBM По дефолту стоит baseline, но я, честно говоря, не поняла еще, почему родительский элемент растягивается и смещается этот самый baseline.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.