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

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

小提琴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元素的长度与其下方的输入元素的长度相同. “组合元素的长度”是指其输入元素的长度和下拉列表按钮的长度.

解决方法:

您的问题是max-width：12em,它考虑了字体大小.
两个元素的字体大小均不同,因此它们的最大宽度值也不同.
将max-width更改为另一个值类型,例如px或使两个元素都具有相同的字体大小,它们将获得相同的宽度

     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>

标签：flexbox,css,html,javascript,dhtmlx
来源： https://codeday.me/bug/20191025/1930741.html