Newbie - Content not staying in container - html

Question

I'm new to web development, but hoping someone has a quick answer.
Having troubles with this: https://codepen.io/kktotheing/pen/gewXor
I can't seem to get the "data-index" (2-5) to stay in it's container. If you click on each box you'll see the content breaking.
I feel like this is something pretty simple, but can't figure it out!
Thoughts?
<section id="timeline">
<div class="content js-content" data-index="1">
<div class="article">
<img class="tmln-img left" src="img/after-party.png">
</div>
<div class="article middle">
<h2>Group Activity (optional)</h2>
<h3>
If interested in Kayaking or Paddle Boarding on Shem Creek with the dolphins, please call Nature's Adventures (843.668.3222) to reserve your spot.
</h3>
</div>
<div class="article right">
<p>Nature’s Adventures<br>
Friday<br>
September 14th<br>
11:00 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="2">
<div class="article">
<img class="tmln-img" src="https://www.instagram.com/p/BeoauojHb7b/?taken-at=858831521">
</div>
<div class="article">
<h2>Welcome Party</h2>
<h3>
Join us on James Island to ring in the weekend.
</h3>
</div>
<div class="article">
<p>Ellis Creek Fish Camp<br>
Friday<br>
September 14th<br>
6:30 PM – 9:30 PM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="3">
<div class="article">
<img class="tmln-img" src="https://scontent-iad3-1.cdninstagram.com/vp/189b811bf84bab74e69f38c1bb2b70da/5B473587/t51.2885-15/e35/26873054_205238820214875_3941054332882911232_n.jpg">
</div>
<div class="article">
<h2>Welcome Drinks</h2>
<h3>
For those arriving later on Friday, please join us after the Welcome Party at our favorite biergarten in downtown Charleston, before heading to King Street.
</h3>
</div>
<div class="article">
<p>East Bay Biergarten<br>
Friday<br>
September 14th<br>
9:30 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="4">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>Ceremony & Reception</h2>
<h3>
Transportation will be provided.
</h3>
</div>
<div class="article">
<p>Middleton Place<br>
Saturday<br>
September 15th<br>
5:00 PM<br><br>
view on map
</p>
</div>
</div>
<div class="content js-content" data-index="5">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>After Party (optional)</h2>
<h3>
For those who want to keep the party going.
</h3>
</div>
<div class="article">
<p>Uptown Social<br>
Saturday<br>
September 15th<br>
11:30 PM<br><br>
view on map
</p>
</div>
</div>
<div class="selector">
Group Activity<br>(optional)
Welcome Party
Welcome Drinks
Ceremony &<br> Reception
After Party<br>(optional)
</div>

Answer 1

If you want your content to have a fixed height, in addition to setting height:300px as you've done, use overflow-y:scroll
To have display:flex on every js-content, in your jQ instead of .show use .css('display','flex') . show() is essentially giving the element the style of display:block. That's why you need to give it a specific display using css()
$content.hide().filter('[data-index="' + index + '"]').css('display','flex');
var $buttons = $('.js-button');
var $content = $('.js-content');
var doContent = function(e) {
e.preventDefault();
var $this = $(e.target);
var index = $this.data('index');
$content.hide().filter('[data-index="' + index + '"]').css('display','flex');
$buttons.removeClass('js-active');
$this.addClass('js-active');
};
$buttons.on('click', doContent);
#timeline {
margin: 0 auto;
width: 70%;
border: 3px solid black;
}
.content {
margin: 0 auto;
display: none;
height: 300px;
background-color: #ffffff;
border: 1px solid #ccc;
overflow-y:scroll;/* added */
}
.content[data-index="1"] {
display: flex;
}
.content[data-index="2"],
.content[data-index="3"],
.content[data-index="4"],
.content[data-index="5"] {
display: none;
}
.article {
border: 2px dashed blue;
padding: 20px;
}
/*.left {
width: 25%;
}*/
.middle {
width: 60%;
}
.right {
width: 25%;
}
.tmln-img {
max-width: 150px;
}
a.tmln-button {
border: 1px solid green;
color: #151515;
padding: 20px;
text-align: center;
text-decoration: none;
}
a.tmln-button.js-active {
text-decoration: none;
background-color: black;
color: white;
}
.selector {
display: flex;
justify-content: space-between;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="timeline">
<div class="content js-content" data-index="1">
<div class="article">
<img class="tmln-img left" src="img/after-party.png">
</div>
<div class="article middle">
<h2>Group Activity (optional)</h2>
<h3>
If interested in Kayaking or Paddle Boarding on Shem Creek with the dolphins, please call Nature's Adventures (843.668.3222) to reserve your spot.
</h3>
</div>
<div class="article right">
<p>Nature’s Adventures<br>
Friday<br>
September 14th<br>
11:00 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="2">
<div class="article">
<img class="tmln-img" src="https://www.instagram.com/p/BeoauojHb7b/?taken-at=858831521">
</div>
<div class="article">
<h2>Welcome Party</h2>
<h3>
Join us on James Island to ring in the weekend.
</h3>
</div>
<div class="article">
<p>Ellis Creek Fish Camp<br>
Friday<br>
September 14th<br>
6:30 PM – 9:30 PM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="3">
<div class="article">
<img class="tmln-img" src="https://scontent-iad3-1.cdninstagram.com/vp/189b811bf84bab74e69f38c1bb2b70da/5B473587/t51.2885-15/e35/26873054_205238820214875_3941054332882911232_n.jpg">
</div>
<div class="article">
<h2>Welcome Drinks</h2>
<h3>
For those arriving later on Friday, please join us after the Welcome Party at our favorite biergarten in downtown Charleston, before heading to King Street.
</h3>
</div>
<div class="article">
<p>East Bay Biergarten<br>
Friday<br>
September 14th<br>
9:30 AM<br><br>
view on map
</p>
<p>
Attire: Southern Chic
</p>
</div>
</div>
<div class="content js-content" data-index="4">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>Ceremony & Reception</h2>
<h3>
Transportation will be provided.
</h3>
</div>
<div class="article">
<p>Middleton Place<br>
Saturday<br>
September 15th<br>
5:00 PM<br><br>
view on map
</p>
</div>
</div>
<div class="content js-content" data-index="5">
<div class="article">
<img class="tmln-img" src="img/after-party.png">
</div>
<div class="article">
<h2>After Party (optional)</h2>
<h3>
For those who want to keep the party going.
</h3>
</div>
<div class="article">
<p>Uptown Social<br>
Saturday<br>
September 15th<br>
11:30 PM<br><br>
view on map
</p>
</div>
</div>
<div class="selector">
Group Activity<br>(optional)
Welcome Party
Welcome Drinks
Ceremony &<br> Reception
After Party<br>(optional)
</div>
</section>