Answer the question
In order to leave comments, you need to log in
How to make two blocks have the same height?
Tell me how to use flexbox to make adjacent blocks stretch depending on the content?
<div class="container">
<div class="block">
<div class="block__content">
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
</p>
</div>
<div class="block__image">
<div class="block__image-wrapper">
<img src="image.jpg" alt="Фото куницы">
</div>
</div>
</div>
<div class="block">
<div class="block__content">
<p>
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Путь, точках запятых. Свою грамматики предложения он текстов текст мир первую, свой раз жизни назад все гор что лучше там?
</p>
</div>
<div class="block__image">
<div class="block__image-wrapper">
<img src="image.jpg" alt="Фото куницы">
</div>
</div>
</div>
</div>
.containers{
margin: 0 auto;
padding: 0 30px;
display: flex;
}
.block {
display: flex;
flex-direction: column;
flex-direction: column-reverse;
margin-top: 50px;
padding: 10px;
max-width: 800px;
}
.block__content {
max-width: 50%;
padding-top: 15px;
padding-right: 15px;
font-size: 18px;
background: red;
}
p {
margin: 0;
}
.block__image {
width: 100%;
height: 100%;
}
.block__image-wrapper {
background-color: rgb(206, 10, 10);
width: 100%;
height: 100%;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
margin: 0 0 20px 0;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question