Блог

В данный момент я создаю соответствующую целевую страницу, которая при полной ширине имеет 2 поля, которые должны совпадать по высоте, то есть растягиваться до самого высокого. По всей ширине эти поля должны располагаться рядом друг с другом, я могу заставить это работать либо с css grid, либо с flex box, поскольку они находятся в одной строке.

Когда на экране мобильного размера поля должны располагаться друг под другом, но при этом совпадать по высоте, вот что у меня есть на данный момент.

     <div class="welcome-wrapper">
   <div class="mt-4 v-card v-sheet theme--light">
      <div class="v-card__text text-center">
         <p class="headline font-weight-regular text-center my-3">First Action Box</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <button type="button" class="font-weight-bold v-btn v-btn--depressed v-btn--rounded theme--light v-size--x-large success" data-v-step="7"><span class="v-btn__content">Do Action One</span></button>
      </div>
   </div>
   <div class="mt-4 v-card v-sheet theme--light">
      <div class="v-card__text text-center">
         <p class="headline font-weight-regular text-center my-3">Second Action Box</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie interdum nulla, non rhoncus dolor fringilla vel. Sed eu tellus mollis, auctor sem sed, bibendum purus. Cras eget urna viverra, dapibus urna sed, eleifend massa..</p>
         <button type="button" class="font-weight-bold v-btn v-btn--depressed v-btn--rounded theme--light v-size--x-large" style="background-color: rgb(72, 164, 201); border-color: rgb(72, 164, 201);"><span class="v-btn__content">Do action two</span></button>
      </div>
   </div>
</div>


    .welcome-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    /* flex-wrap: wrap; */
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
}

.welcome-wrapper .v-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    flex-basis: 100%;
}

.welcome-wrapper .v-card .v-card__text {
    height: 100%;
    width: 100%;
}
  

У кого-нибудь есть советы о том, как соответствовать высоте элементов, когда они на самом деле не расположены в строке?

Игнорируя классы начальной загрузки, вот и все.

 .welcome-wrapper {
  display: flex;
  flex-direction: column;
}

@media(min-width:768px) {
  .welcome-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.welcome-wrapper .v-card {
  background-color: #333;
  color: #f0f0f0;
  border: 0.05rem solid #eee;
  flex: 1 1 0;
  padding: 2rem;
}  

 <div class="welcome-wrapper">
  <div class="v-card">
    <div>
      <p>First Action Box</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <button>
        Do Action One
      </button>
    </div>
  </div>
  <div class="v-card">
    <div>
      <p>Second Action Box</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie interdum nulla, non rhoncus dolor fringilla vel. Sed eu tellus mollis, auctor sem sed, bibendum purus. Cras eget urna viverra, dapibus urna sed, eleifend massa..</p>
      <button>
        Do Action One
      </button>
    </div>
  </div>
</div>