Table self-adapting horizontal scroll bar CSS

 <div class= "ndyqfd_table"; 
 <div class= "Ndyqfd_table_box"; 
 <ul class= "Ndyqfd_ul" >< br> <li class= "Ndyqfd_state" > Scoring rate </li> 
 <li class= "ndyqfd_state" > Ease of </li>< br> <li class= "ndyqfd_state" > Degree </li> 
 <li class= "Ndyqfd_state" > title </li> </ul> 
 <ul class= "Ndyqfd_ul" ng-repeat= "list in qufenanddifficultdegreelist"; 
 <li class= "Ndyqfd_ul_li" >{{LIST.GRADERATE1}}</LI> 
 <li class= "Ndyqfd_ul_li" >{{list.diff            Icultyrate1}}</li> 
 <li class= "Ndyqfd_ul_li" >{{(list.qufendegree|number:2)}}</li> 
 <li class= "Ndyqfd_ul_li" >{{LIST.EXAMQUESTIONTITLE}}</LI> 
 </ul> 
 <div Clas S= "Clear" ></DIV> 
 </div> 
 <div class= "NDYQFD_TB" style= "Display:none" ></DIV> 
 & Lt;/div> 

. Ndyqfd_table_box{display:flex;}

. Ndyqfd_ul{flex:none;}

CSS style display:flex for outer div  
Inner Div or Li Flex:none that needs to be looped  

Table self-adapting horizontal scroll bar CSS