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

Question

我发现很难对齐 DHTMLX Combo inside a very simple FlexBox 网格。它似乎扩展了分配给它的宽度。

Fiddle 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 元素的长度相同。 "length of the Combo element" 是指其 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>

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

how to align combo box in a flexbox grid

html

javascript

css

dhtmlx

flexbox