How to get the same height with flexbox in my div class containing sections?-CodePudding

I wanna get it to have the same height within that div class they are inside of ("row"). I already have read some lots of stuff about this, but nothing quite works for me. Since I'm only a beginner in web design generally, I donno what to do. I would really appreciate it if you could help me out!

HTML:

            <div >
                <section id="sectionL">(Mouse pointer) Left-click on a picture to see the name!<br /><br />
                <article>
                    <footer>Recipes</footer><br /><br />
                    
                        <div >
                            <img  src="img/Gruenkohl.jpg" alt="Kale with Kasseler, Sousages and Potatos" onclick="image(event)" width="100%" /><br />
                        </div><br />
                        
                        <br /><br /><br />
                        
                        <div >
                            <img  src="img/Kirschtorte.jpg" alt="Cherry pie" onclick="image(event)" width="100%" /><br />
                        </div><br />
                        <br /><br />
                        
                        <br /><br /><br />
                        
                        <div >
                            <img  src="img/Frankfurter.png" alt="Frankfurter Green Souce" onclick="image(event)" width="100%" /><br />
                        </div><br />
                        
                    </article>
                </section>
                
                    
                <section id="sectionR"><br /><br />
                    <article>
                        <footer>Tips</footer><br /><br />
                        Regional Markets:<br /><br />
                        <div >
                            <img  src="img/Lidl.jpg" alt="Lidl Discounter" onclick="image(event)" width="100%" /><br />
                        </div>
                        
                        <div >
                            <img  src="img/Norma.jpg" alt="Norma Discounter" onclick="image(event)" width="100%" /><br />
                        </div>
                        
                        <div >
                            <img  src="img/REWE.jpg" alt="REWE Market" onclick="image(event)" width="100%" /><br />
                        </div><br />
                        
                        Local Restaurants (Darmstadt):<br /><br />
                        <div >
                            <img  src="img/Nazar.png" alt="Nazar" onclick="image(event)" width="100%" /><br />
                        </div>
                        
                        <div >
                            <img  src="img/Shirza.png" alt="Shirza" onclick="image(event)" width="100%" /><br />
                        </div>
                    </article>
                </section>
            </div>

            <div id="myModal" >
            <span >&times;</span>
            <img  id="img01">
            <div id="caption"></div>
            </div>
            <script>
                var modal = document.getElementById("myModal");
                var modalImg = document.getElementById("img01");
                var captionText = document.getElementById("caption");
                function image(event) {
                    modal.style.display = "block";
                    modalImg.src = event.target.src;
                    captionText.innerHTML = event.target.alt;
                }
                var span = document.getElementsByClassName("close")[0];
                span.onclick = function () {
                    modal.style.display = "none";
            };
            </script>

CSS:

* {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    font-family: "Monteserat", Arial, sans-serif;
    scrollbar-width: thin !important;
    scrollbar-color: #8a2431ff #3d1016 !important;
    background-color: #3d1016;
}

header,
section,
aside,
footer {
    background-color: #651a24;
    padding: 25px;
}

header {
    width: 100%;
    margin: 0px 0px 0px 0px;
}

section {
    background-color: #3d1016;
    float: left;
    width: 100%;
    margin: 0px 0px 0px 0px;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  float: left;
  width: 100%;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

#sectionL {
    float: left;
    width: 49.85%;
    margin: 0px 0px 0px 0px;
}

#sectionR {
    float: right;
    width: 49.85%;
    margin: 0px 0px 0px 0px;
}

section header,
section article {
    font-weight: normal;
    color: #f2f2f2;
    text-align: left;
    background-color: #651a24;
    border-radius: 10px;
    width: 100%;
    box-shadow: none;
    margin: 25px 0px 0px 0px;
    padding: 44px;
}

.polaroid {
    width: 100%;
    text-align: center;
    box-shadow: 0 5px 15px #000000;
    margin-bottom: 25px;
}

.container {
    text-align: left;
    padding: 10px 0px 10px 5px;
}

iframe{
    box-shadow: 0 5px 15px #000000;
}

.myImg {
  border-radius: 0px;
  cursor: pointer;
  transition: 0.3s;
}

.myImg:hover {
  opacity: 0.6;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
  background-color: transparent;
}

.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  background-color: transparent;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

CodePudding user response：

click to see pic

set

height: 100%;

to your both article elements (in #sectionL and #sectionL). You cant set same height for this elements without setting exact value of height, cause they are children of different elements. Also please dont use <br> for indents. Its a bad practice. Use margin or padding instead.