如何使div子项适合宽度较小的父div

Question

我有一个div作为父div包含动态创建的子div尽可能多，但我的问题是我希望子div为内联，因此用户可以滚动水平以查看更多的子div，因为他们滚动但我的是垂直滚动而不是水平滚动我尝试将overflow-y设置为隐藏，但仍然不是子div不是内联一次。

<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;
}

这是动态创造

<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

你听说过Flexbox吗？我认为它可以帮到你。只需添加父div的样式：

display: flex;
flex-wrap: nowrap;

更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我没试过，只是觉得它可以帮到你： - ）

Answer 2

您可以在white-space:nowrap div中使用parent，如果可以设置动态生成的child元素，那么您甚至需要将其从display更改为内嵌 - 阻止如下，

  

white-space CSS属性确定如何处理元素内的空白。

#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>