如何减少 html+css 中动态生成的 div 标签的填充/间距？

Question

我有 4 个选项可供我选择：区域、专业、组和健康相关程序的子组。 每次我 select 一个子组它都会渲染页面里面的程序。 我的问题是 div 的高度被分成相等的部分到每一行，这导致填充比我想要的大很多。 我需要 select 其他选项，以便将填充减少到最小。 下面是一些图片来澄清这个问题。

不良行为

这就是我将 procedimento_row div 高度更改为 30px 或fit-content时发生的情况。 高度降低但创建填充以填充所有 div

自第一次选择子组以来的预期高度和填充

正下方是生成行的 function

$("body").on("change", "#subgrupo_procedimento", function() {
    var procedimento = "";

    $.get("/procedimento/procedimentos-por-subgrupo/" + $("#subgrupo_procedimento").val(), function(data) {
        for (let i = 0; i < data.length; i++) {                     
        
            procedimento += '<div class="row procedimento_row">';
            procedimento +=     '<span class="col-md-1 procedimento_options">';
            procedimento +=         '<input class="cb" type="checkbox" name="procedimentos" value="'+data[i].id+'">';
            procedimento +=     '</span>';  
            procedimento +=     '<span class="col-md-3 procedimento_options">';
            procedimento +=         data[i].codigoTuss;
            procedimento +=     '</span>';
            procedimento +=     '<span class="col-md-6 procedimento_options" data-toggle="tooltip" data-placement="top" title="'+data[i].descricao+'">';
            procedimento +=         data[i].descricao;
            procedimento +=     '</span>';      
            procedimento +=     '<span class="col-md-2 procedimento_options">';
            procedimento +=     data[i].valorPreferencial.toFixed(2).replace(".", ",");
            procedimento +=     '</span>';
            procedimento += '</div>';
            
        }
        $("#procedimento_table").append(procedimento);
    });
});

div“procedimento_row”位于名为“procedimento_table”的 div 内：这是 procedimento_table css：

#procedimento_table {
    width: 100%;
    height: 300px;
    overflow-y: scroll;
    margin-right: 0 !important;
    margin-left:  0 !important;
}

Answer 1

您是否尝试在 css 中为它们提供 25 像素的最大高度？ 看起来它们正在被弹性拉伸。

.procedimento_row {
   max-height: 25px !important; 
}

编辑：请参阅此 codepen 例如表 ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ https://codepen.io/PavlosKaralis/pen/OJMgqRZ

#procedimento_table{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 300px;
  overflow-y: auto; 
}

#procedimento_row{
  min-height: 25px; 
}

Answer 2

尝试从<div class="row" id="procedimento_table">中删除class="row" 。 我没有看到任何证据表明它在这里。 我们的孩子中有这个 class，这就足够了。

或添加到您的#procedimento_table下一个代码，只要row其display: flex

#procedimento_table {
    width: 100%;
    height: 300px;
    overflow-y: scroll;
    margin-right: 0 !important;
    margin-left:  0 !important;
    /* add this */
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}