How to make ul width in .menu-sub-col equal to content width?
https://fiddle.jshell.net/j9ujfL2n/3/
.menu { position: absolute; z-index: 90; display: flex; flex-direction: row; top: 40px; left: 0; transition: transform 0.25s ease-in-out; transform: translateY(-100%); visibility: hidden; } .menu--visible { transform: translateY(0); visibility: visible; } .menu ul { list-style-type: none; padding: 0; margin: 0; } .menu li { cursor: pointer; } .menu-main { background-color: #3E5AE2; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); height: max-content; } .menu-main li { position: relative; padding: 10px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); color: rgba(255, 255, 255, 0.7); font-size: 14px; } .menu-main li:hover { color: #fff; } .menu-main li.active { background-color: #4B67E8; color: #fff; } .menu-main li.active:after { content: ''; position: absolute; right: -8px; top: calc(50% - 8px); width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent #4B67E8; clear: both; } .menu-main li i { margin-right: 15px; } .menu-sub:not(:empty) { padding: 20px 30px; display: flex; flex-direction: row; background: #fff; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } .menu-sub-col { padding-right: 25px; } .menu-sub-col:not(:last-child) { border-right: 1px solid #eeeeee; margin-right: 25px; } .menu-sub-col h4 { color: #bdbdbd; font-size: 12px; text-transform: uppercase; } .menu-sub-col ul { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; max-height: 180px; } .menu-sub-col li { flex: 1 1 auto; font-size: 12px; font-weight: 500; padding: 5px 4px; padding-left: 0; opacity: 0.75; } .menu-sub-col li:hover { color: #ffffff; opacity: 1; background: #4b67e9; box-shadow: -10px 0px 0px #4b66ea, 10px 0px 0px #4b66ea; transition: box-shadow 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; border-radius: 3px; } .menu-sub-col li i { margin-right: 8px; }
<div class="menu menu--visible"> <div class="menu-main"> <ul> <li class=""><i class="mdi mdi-earth"></i>Monitoring</li> <li class="active"><i class="mdi mdi-file-chart"></i>Raporty</li> <li class=""><i class="mdi mdi-format-list-bulleted"></i>Ewidencja</li> <li class=""><i class="mdi mdi-settings"></i>System</li> </ul> </div> <div data-subname="reports" class="menu-sub"> <div class="menu-sub-col"> <h4>Pojazdy</h4> <ul> <li><i class="mdi mdi-earth"></i>Trasa</li> <li><i class="mdi mdi-earth"></i>Doby</li> <li><i class="mdi mdi-earth"></i>Bazy</li> <li><i class="mdi mdi-earth"></i>Id</li> <li><i class="mdi mdi-earth"></i>Paliwo</li> <li><i class="mdi mdi-earth"></i>Prฤdkoลci</li> <li><i class="mdi mdi-earth"></i>Praca silnika</li> <li><i class="mdi mdi-earth"></i>Liczniki</li> <li><i class="mdi mdi-earth"></i>Pryw. Firm</li> <li><i class="mdi mdi-earth"></i>Statusy pracy</li> <li><i class="mdi mdi-earth"></i>Kursy</li> <li><i class="mdi mdi-earth"></i>Przeglฤ
dy</li> <li><i class="mdi mdi-earth"></i>PIAP</li> <li><i class="mdi mdi-earth"></i>PLK</li> </ul> </div> <div class="menu-sub-col"> <h4>Kierowcy</h4> <ul> <li><i class="mdi mdi-earth"></i>Obsada</li> <li><i class="mdi mdi-earth"></i>Id</li> </ul> </div> <div class="menu-sub-col"> <h4>Punkty wลasne</h4> <ul> <li><i class="mdi mdi-earth"></i>Dla pojazdu</li> <li><i class="mdi mdi-earth"></i>Dla POI</li> </ul> </div> </div> </div>
source share