C
C
cracker-test2022-03-23 09:36:57
css
cracker-test, 2022-03-23 09:36:57

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

1 answer(s)
A
Alexander, 2022-03-23
@cracker-test

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question