콤보 박스를 플렉스 박스 그리드에 정렬하는 방법

Question

DHTMLX Combo을 매우 간단한 FlexBox 격자 안에 정렬하는 것이 어렵습니다. 그것은 그것에 할당 된 너비를 확장하는 것으로 보인다.

피들 here.

e.e. 다음과 같은 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> 

& hellip; 다음 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; 
} 

& hellip; 내가 사용 콤보 만들 때 :

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 값이 다릅니다. 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>