Столбец одинаковой высоты через два деления

Question

Я искал и не могу найти ответ на этот вопрос. У меня есть два div, один содержит один столбец, а другой содержит два столбца. Я ищу, чтобы три колонны достигли равных высот на буксирных делениях. Я уверен, что это возможно, я просто еще не знаю. Вот код ниже. Как вы можете видеть, я могу заставить их выравниваться по дну, но мне чего-то не хватает.

.cplan-section{
 display: flex;
}
.technical-products{
	width:33%;
}
.training-products{
	width:66%;
}
.section-title{
	padding: 30px 0;
}
.technical-products, .training-products{
	display:flex;
	 flex-direction: column;
 justify-content: space-between;
}
.cproducts, .train-video, .job-aids{
	padding:10px;
}
.col-header p{
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
.col-body{
	padding:0 10px;
	color:#000;
	background-color: #d5deed;
}
.col-header{
  min-height: 100px;
  line-height: 100px;
  text-align: center;
    background-color: #98cb42;
	color:#fff;
}
.col-tp{
	width:50%;
  border:2px solid #000;
}
.col-cp{
  border:2px solid #000;
}
.sectioncp, .sectiontp{
	display:flex;
}
.col-tp{
flex-direction:vertical;
}
.cp-header, .tv-header, .ja-header{
	background-color:#98cb42;
	color:#fff;
	padding:5px
}

/*media for plan section */
@media (max-width: 767px){
		.covid-plan-section{
 display: inline;
}
	.technical-products, .training-products{
	display:block;
}
		.technical-products{
	width:100%;
}
.training-products{
	width:100%;
}
		.sectiontp{
	display:flex;
}
	.col-tp{
		display:flex;
		 flex-direction: column;
 justify-content: space-between;
	}
}

@media (max-width: 479px){
	.covid-plan-section{
 display: block;
}
		.technical-products, .training-products{
	display:block;
}
	.technical-products{
	width:100%;
}
.training-products{
	width:100%;
}
	.sectiontp{
	display:inline;
}
	.col-tp{
	width:100%;
}
}

<div class=cplan-section>
    <div class=technical-products>
        <div class=section-title>
                <h2 style="text-align: center;">This is Section 1</h2>
        </div>

            <div class=sectioncp>
                <div class=col-cp>
                    <div class=cproducts>
                            <div class=col-header>
                                    <p style="text-align: center;">Title 1</p>
                            </div>
                            <div class=col-body>
                                    <ul>
                                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                                    </ul>
                            </div>
                    </div>

                </div>
            </div>
    </div>
    <div class=training-products>
        <div class=section-title>
                <h2 style="text-align: center;">This is section 2</h2>
        </div>

        <div class=sectiontp>
            <div class=col-tp>
                <div class=train-video>
                        <div class=col-header>
                                <p style="text-align: center;">Title 2</p>
                        </div>
                            <div class=col-body>
                                <ul>
                                    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
                                    <li>Lorem Ipsum is simply dummy text.</li>
                                </ul>
                            </div>
                </div>
            </div>
                <div class=col-tp>
                    <div class=job-aids>
                        <div class=col-header>
                                <p style="text-align: center;">Title 2</p>
                        </div>
                        <div class=col-body>
                                <ul>
                                    <li>Lorem Ipsum</li>
                                    <li>Lorem Ipsum</li>
                                    <li>Lorem Ipsum text</li>
                                </ul>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>

Answer 1

Ваше предложение без настройки свойства высота или минимальная высота невозможно. Элементы «одинаковой высоты» не имеют возможности сделать это, не ссылаясь на братьев и сестер в одной и той же «строке» с помощью flexbox.

Что вы могли бы сделать (неортодоксально, почти плохая практика, если вам потребуется динамизация, Я предполагаю, что вы не будете), по крайней мере, мое решение для вашей проблемы состоит в том, чтобы собрать все это в один гибкий контейнер, один за другим.

Это будет иметь вид:

.title1
.title2
.col1
.col2
.col3

Отображение этого:

Но как? Ваша структура упростилась:

<div class="cplan-section">
    <div class="products">
        <div class="title1">
            <h2 style="text-align:center;">This is Section 1</h2>
        </div>
        <div class="title2">
            <h2 style="text-align:center;">This is section 2</h2>
        </div>
        <div class="col1">
            <div class="cproducts">
                <div class="col-header">
                    <p style="text-align: center;">Title 1</p>
                </div>
                <div class="col-body">
                    <ul>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col2">
            <div class="train-video">
                <div class="col-header">
                    <p style="text-align: center;">Title 2</p>
                </div>
                <div class="col-body">
                    <ul>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                        <li>Lorem Ipsum is simply dummy text.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col3">
            <div class="job-aids">
                <div class="col-header">
                    <p style="text-align: center;">Title 2</p>
                </div>
                <div class="col-body">
                    <ul>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum</li>
                        <li>Lorem Ipsum text</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

И это ваше CSS:

html { padding:30px; }
* { font-family:"Arial", sans-serif; box-sizing:border-box; }

.cplan-section .products {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    border:1px solid #aaa;
    padding:10px;
}

.cplan-section .products div[class^="title"] {
    text-align:left;
    padding-left:20px;
}

.cplan-section .products .col1,
.cplan-section .products .col2,
.cplan-section .products .col3 {
    border:1px solid #777;
    padding:10px;
}

.cplan-section .products .title1,
.cplan-section .products .col1 { flex-basis:40%; }
.cplan-section .products .title2 { flex-basis:60%; }
.cplan-section .products .col2,
.cplan-section .products .col3 { flex-basis:30%; }

@media (max-width:479px) {
  .cplan-section .products {
    flex-direction:row;
    flex-wrap:wrap;
  }
    .cplan-section .products div[class^="title"],
    .cplan-section .products div[class^="col"] { flex-basis:100%; }
    .cplan-section .products .title1,
    .cplan-section .products .col1 { order:-2; }
    .cplan-section .products .title2 { order:-1; }
}

Это нормально, но как насчет того, когда мы складываем элементы в мобильном / адаптивном представлении? Они будут плохо организованы. Хорошо, по умолчанию каждый содержащийся элемент flex имеет значение 0 'order', и они складываются для визуализации в порядке появления. Так что, если я изменю это свойство для первых 3 элементов, это должно быть сделано. Посмотрите на нижнюю часть кода CSS.

А вот так должен выглядеть видовой экран 479px и ниже:

Скрипка: https://jsfiddle.net/Dethdude/ch0mrgbe/23/