如何在flexbox网格中对齐组合框

Question

我发现很难将DHTMLX Combo对齐在一个非常简单的FlexBox网格中。它似乎扩展了分配给它的宽度。

小提琴here。

即。给出以下HTML：

<div class='flex-row'>
  <label>select:</label>
  <div id="combo_id"></div>
</div>

<div class='flex-row'>
  <label>name:</label>
  <input type='text' />
</div>

...以及以下CSS：

 .flex-row {
   display: flex;
   justify-content: flex-start;
 }

 .flex-row > label {
   width: 20%;
   max-width: 4em;
 }

 .flex-row > *:nth-child(2) {
   border: 1px solid red;
   width: 50%;
   max-width: 12em;
 }

...当我使用：

创建组合时

const combo = new dhtmlXCombo({
   parent: "combo_id",
   name: "alfa2",
   items: [], // no items, this is just a SSCCE
   readonly: false
 });

我遇到以下情况：

此外，随着屏幕变宽，组合的宽度不会更新。

我的目标是使Combo元素的长度与其下面的input元素的长度相同。 “组合元素的长度”是指input元素的长度和下拉列表按钮的长度。

Answer 1

问题在于考虑字体大小的max-width:12em 这两个元素都有不同的font-size，因此它们会得到不同的max-width值 将max-width更改为其他值类型，例如px，或者将两个元素设为相同font-size，它们将获得相同的width

     const combo = new dhtmlXCombo({
       parent: "combo_id",
       name: "alfa2",
       items: [], // no items, this is just a SSCCE
       readonly: false
     });

     .flex-row {
       display: flex;
       justify-content: flex-start;
     }
     
     .flex-row > label {
       width: 20%;
       max-width: 4em;
     }
     
     .flex-row > *:nth-child(2) {
       border: 1px solid red;
       width: 50%;
       max-width: 12em;
       font-size:12px;
     }

<link href="https://cdn.dhtmlx.com/5.0/dhtmlx.css" rel="stylesheet"/>
<script src="https://cdn.dhtmlx.com/5.0/dhtmlx.js"></script>
<link href="https://cdn.dhtmlx.com/5.0/skins/skyblue/dhtmlx.css" rel="stylesheet"/>
<div class='flex-row'>
  <label>select:</label>
  <div id="combo_id"></div>
</div>

<div class='flex-row'>
  <label>name:</label>
  <input type='text' />
</div>