comment faire un enfant div dans un div parent avec une largeur plus petite

Question

J'ai un div comme un div div contenant dynamique div enfants créés autant que, mais mon problème est que je veux que les enfants div soient en ligne afin que les utilisateurs peuvent faites défiler horizontalement pour voir plus de div enfants comme ils défilent mais mon défile verticalement au lieu d'horizontal et j'essaye de placer le débordement-y à caché mais toujours pas les enfants div ne sont pas en ligne une fois.

<div id="frnd_r_s_c"> 
    <?php 
     $sqlfrnds = $db_connect->prepare("select * from users where id!=?"); 
     $sqlfrnds->bind_param('s',$row["id"]); 
     $sqlfrnds->execute(); 
     $result = $sqlfrnds->get_result(); 

     while($rows = $result->fetch_assoc()){ 

    ?> 
    <div class="suggest-frnd"> 
     <div id="s_f_exit">&nbsp;&times;</div> 
     <div class="suggest-frnd-img"> 
      <img src="<?php ?>" > 
     </div> 
     <div class="suggest-frnd-n-add"> 
      <div id="suggest-frnd-n"><?php echo $rows["u_firstname"]."&nbsp;";echo $rows["u_othernames"]; ?></div> 
     <div> 
      <form id="s_frnd_form"> 
       <input type="hidden" name="s_frnd_id" value="<?php echo $rows['id']; ?>"> 
       <input type="submit" name="add_frnd" value="ADD"> 
      </form> 
     </div> 
    </div> 
</div> 

<?php 
    } 
?> 
<div class="clear"></div> 
</div> 


/*style for parent div*/ 
#frnd_r_s_c{ 
    width:450px; 
    height:200px; 
    background:blue; 
    margin-left:20px; 
    overflow-y:hidden; 
    overflow-x:scroll; 
} 

/*floating the children div left to be able to display inline*/ 
#frnd_r_s_c >div{ 
    float:left; 
} 

cela est la dynamique de créer les

<div id="frnd_r_s_c"> 
                          <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">ekene&nbsp;gabriel</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="5"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                             <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">ebuka&nbsp;gabriel</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="14"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                             <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">kc&nbsp;kelvin</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="15"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                             <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">ecellent &nbsp;chimezie</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="16"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                             <div class="suggest-frnd"> 
                 <div id="s_f_exit">&nbsp;&times;</div> 
                 <div class="suggest-frnd-img"> 
                   <img src="" > 
                 </div> 
                 <div class="suggest-frnd-n-add"> 
                  <div id="suggest-frnd-n">ecellent &nbsp;chimezie</div> 
                  <div><form id="s_frnd_form"> 
                   <input type="hidden" name="s_frnd_id" value="17"> 
                   <input type="submit" name="add_frnd" value="ADD"> 
                  </form></div> 
                 </div> 
                </div> 

                           <div class="clear"></div> 
            </div> 

Answer 1

Vous pouvez utiliser white-space:nowrap dans parent div et si il est possible de style child éléments qui génèrent dynamiquement alors vous avez même besoin de le changer display du bloc au bloc inline comme ci-dessous,

white-space La propriété CSS détermine la manière dont les espaces sont gérés dans un élément.

#box{ 
 
    width:100%; 
 
    height:250px; 
 
    background:black; 
 
    white-space:nowrap; 
 
    overflow-x:scroll; 
 
} 
 
#box > .b:first-child{ 
 
    margin-left:0; 
 
} 
 
#box > .b{ 
 
    width:500px; 
 
    height:200px; 
 
    margin-left:50px; 
 
    background:yellow; 
 
    display:inline-block; 
 
}

<div id="box"> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
    <div class="b"></div> 
 
</div>

Answer 2

avez-vous entendu parler de Flexbox? Je pense que ça peut t'aider. Il suffit d'ajouter au style de la div parent:

display: flex; 
flex-wrap: nowrap; 

plus ici: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Je n'ai pas essayé, juste pensé qu'il pourrait vous aider :-)