I created a menu using Bootstrap. I don't want the content to overflow in the column mode and be automatically moved down after reaching the end of the menu. The submenus of this megamenu have variable heights, which is why I want to use the column flex property. enter image description here
i want the output to be like below image : enter image description here
this is my megamenu code :
.dropdown-menu.show {
left: 0 !important;
right: 0 !important;
max-height: 260px;
flex-direction: column;
display: flex;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
<div class="row mx-0">
<div class="col-12">
<div class="align-content-between align-items-center flex-column row" style="max-height: 288px;">
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">++C</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">String and Date</a></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li></ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">PHP</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Cookie & Session</a></li>
<li class="mega-menu-subcategory"><a href="#">Date And Time</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Python</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Tkinter</a></li>
<li class="mega-menu-subcategory"><a href="#">Databse</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div><div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div><div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div></div>
</div>
</div>
</div>
</li>
</ul>I have made the following code changes to make the scrollable menu.
<!-- Remove align-content-between align-items-center flex-column -->
<!-- Add overflow-y: auto; overflow-x: hidden; -->
<!-- Change "max-height: 288px;" to "max-height: 250px;"-->
<div class="row" style="max-height: 250px; overflow-y: auto; overflow-x: hidden;">
.dropdown-menu.show {
left: 0 !important;
right: 0 !important;
max-height: 260px;
flex-direction: column;
display: flex;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
<div class="row mx-0">
<div class="col-12">
<!-- Remove align-content-between align-items-center flex-column -->
<!-- Add overflow-y: auto; overflow-x: hidden; -->
<!-- Change "max-height: 288px;" to "max-height: 250px;"-->
<div class="row" style="max-height: 250px; overflow-y: auto; overflow-x: hidden;">
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">++C</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">String and Date</a></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">PHP</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Cookie & Session</a></li>
<li class="mega-menu-subcategory"><a href="#">Date And Time</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Python</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Tkinter</a></li>
<li class="mega-menu-subcategory"><a href="#">Databse</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>EDIT 1: Remove overflow-x, overflow-y and max-height: 250px; styles and remove the max-height in .dropdown-menu.show
<!-- Remove align-content-between align-items-center flex-column -->
<!-- Remove overflow-y: auto; overflow-x: hidden; -->
<!-- Remove "max-height: 250px;"-->
<div class="row">
.dropdown-menu.show {
left: 0 !important;
right: 0 !important;
/* max-height: 260px; */
flex-direction: column;
display: flex;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
<div class="row mx-0">
<div class="col-12">
<!-- Remove align-content-between align-items-center flex-column -->
<!-- Remove overflow-y: auto; overflow-x: hidden; -->
<!-- Remove "max-height: 250px;"-->
<div class="row">
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
<li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
<li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
<li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
<li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">++C</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">String and Date</a></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">PHP</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Cookie & Session</a></li>
<li class="mega-menu-subcategory"><a href="#">Date And Time</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Python</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
<li class="mega-menu-subcategory"><a href="#">Tkinter</a></li>
<li class="mega-menu-subcategory"><a href="#">Databse</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>