-1
私はFlexBoxを使用して複数列のフォームテンプレートを作成しています。CSS - 内容に応じた動的な境界
私はセンターDIVの幅が66.7％です。私は中央のdiv内のコンテンツに応じてサイズが変更されます境界線を持っている方法を探しています
それを達成するためのいくつかの方法があります（そして、例のように全体のDIVを囲んでいませんか）？
CodePen：https://codepen.io/dsomekh/pen/NjRQjK
<html>
<style>
input:([type=radio]){
min-width:10px;
}
.page{
display:flex;
/*border: 5px solid orange;*/
}
.left{
width:33.3%;
/*border: 5px solid pink;*/
}
.center{
width:66.7%;
border: 2px solid skyblue;
}
.row_title{
display:flex;
flex-direction:row;
align-items:flex-end;
/*border: 5px solid skyblue;*/
}
.row_input{
display:flex;
margin-bottom:1%;
align-items:flex-start;
flex-direction:row;
/*border: 5px solid skyblue;*/
}
.cell_right_Radio{
max-width:300px;
overflow:auto;
flex-direction:column;
display:flex;
flex-direction:row
flex-wrap:wrap;
}
.cell_right_CB{
max-width:300px;
overflow:auto;
display:flex;
justify-content:flex-start;
flex:1;
}
.cell_right{
max-width:300px;
overflow:auto;
display:flex;
flex-direction:column;
justify-content:flex-start;
flex:1;
}
.cell_left{
margin-right:10%;
max-width:300px;
overflow:auto;
flex-direction:column;
display:flex;
flex:1;
}
.option{
margin-top:2%;
display:flex;
}
</style>
<div class="page">
<div class="left"></div>
<div class="center">
<div class="row_title">
<div class="cell_left">By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions</div>
<div class="cell_right">Reason for clone</div>
</div>
<div class="row_input">
<div class="cell_left"><input type="text" name="phone"></div>
<div class="cell_right"><input type="text" name="phone"></div>
</div>
<div class="row_title">
<div class="cell_left">Name</div>
<div class="cell_right">Email</div>
</div>
<div class="row_input">
<div class="cell_left"><textarea rows="12" cols="100"></textarea></div>
<div class="cell_right"><input type="text" name="phone"></div>
</div>
<div class="row_title">
<div class="cell_left">Title</div>
<div class="cell_right">Company</div>
</div>
<div class="row_input">
<div class="cell_left"><input type="text" name="phone"></div>
<div class="cell_right"><input type="text" name="phone"></div>
</div>
<div class="row_title">
<div class="cell_left">Reseller</div>
<div class="cell_right">Reason for clone</div>
</div>
<div class="row_input">
<div class="cell_left"><input type="text" name="phone"></div>
<div class="cell_right_Radio"><div class="option"><input type="radio" style="min-width:13px!important" name="gender" value="male">Hardware change</div><div class="option"><input style="min-width:13px!important" type="radio" name="gender" value="male">Unknown</div><div class="option"><input style="min-width:13px!important" type="radio" name="gender" value="male">Version upgrade</div><div class="option"><input style="min-width:13px!important" type="radio" name="gender" value="male">New physical host</div><div class="option"><input style="min-width:13px!important" type="radio" name="gender" value="male">Other</div></div>
</div>
<div class="row_title">
<div class="cell_left">Support person email Support person email Support person email</div>
<div class="cell_right">By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions</div>
</div>
<div class="row_input">
<div class="cell_left"><input type="text" name="phone"></div>
<div class="cell_right_CB"><input type="checkbox" name="vm" onclick="Onvm(this)"></div>
</div>
<div class="row_title">
<div class="cell_left">Virtual machine platform</div>
<div class="cell_right">Virtual machine clusterd (Hosted on multiple servers)</div>
</div>
<div class="row_input">
<div class="cell_left"><input type="text" name="phone"></div>
<div class="cell_right"><input type="text" name="phone"></div>
</div>
<div class="row_title">
<div class="cell_left">TeamViewer ID</div>
<div class="cell_right">TeamViewer Password</div>
</div>
<div class="row_input">
<div class="cell_left"><input type="text" name="phone"></div>
<div class="cell_right"><input type="text" name="phone"></div>
</div>
<div class="row_title">
<div class="cell_left">Screenshot</div>
<div class="cell_right">By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions</div>
</div>
<div class="row_input">
<div class="cell_left"><input type="file" name="screenshot"></div>
<div class="cell_right"><input type="text" name="phone"></div>
</div>
</div>
</div>
それはあなたが求めるものを理解することは非常に困難ですが、あなたはそれが – LGSon