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

【问题标题】：how to align combo box in a flexbox grid如何在 flexbox 网格中对齐组合框
【发布时间】：2018-02-15 12:12:15
【问题描述】：

我发现很难在一个非常简单的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 元素的长度与它下面的 input 元素的长度相同。 “组合元素的长度”是指其input 元素的长度和下拉列表按钮的长度。

【问题讨论】：

你想达到什么目的？使选择和名称具有相同的宽度？还是什么？
@Taldakus 问题已更新。
看起来DHTMLX Combo 设置了自己的宽度。构造函数定义有一个宽度参数，它接受一个以像素为单位的数字。检查该对象表明它在元素级别设置样式，您的样式不会覆盖。
@MikeTheReader 所以也许我可以读取（使用Javascript）它下面的元素的宽度，然后自己设置组合元素的宽度？还是这太过分了？
@MarcusJuniusBrutus - 选择 Sag1v 的答案。我把它弄得太复杂了。

标签： javascript html css flexbox dhtmlx

【解决方案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>

【讨论】：

不错的答案。从max-width: 12em 到max-width: 12rem 的简单切换解决了这个问题。
px 或 rem 的单位解决了这个问题，但是当屏幕尺寸减小时，组合控件没有响应。要在此答案的代码 sn-p 中看到这一点，您必须全页打开它并缩小屏幕宽度。显然，该组合在使用 JavaScript 构造时仅设置其组成部分的宽度一次。
@MarcusJuniusBrutus 当然，这是在页面加载时进行 js 计算时的例外行为。