我已经编写了一个脚本（在这里用户的帮助下），该脚本允许我扩展选定的div并通过相等地拉伸以适合剩余的空间（使第一个div的宽度固定）来使其他div相应地表现。
这是我要实现的目标的图片：
为此，我使用flex和transitions。
它运作良好，但是jQuery脚本指定了“ 400％”的拉伸值（非常适合测试）。
现在，我希望所选的div扩展/缩小以完全适合内容，而不是“ 400％”固定值。
我不知道该怎么做。
可能吗 ？
我尝试克隆div，使其适合内容，获取其值，然后使用该值转换BUT，这意味着我的初始宽度为百分比，但目标值为像素。那不行
而且，如果我将像素值转换为百分比，则无论出于何种原因，结果都不完全适合内容。
在所有情况下，这似乎都是实现我想要的目标的一种复杂方法。
是否没有可以转换的flex属性以适合选定div的内容？
这是代码（为了便于阅读，对其进行了编辑/简化）：
var expanded = '';
$(document).on("click", ".div:not(:first-child)", function(e) {
var thisInd =$(this).index();
if(expanded != thisInd) {
//fit clicked fluid div to its content and reset the other fluid divs
$(this).css("width", "400%");
$('.div').not(':first').not(this).css("width", "100%");
expanded = thisInd;
} else {
//reset all fluid divs
$('.div').not(':first').css("width", "100%");
expanded = '';
}
});.wrapper {
overflow: hidden;
width: 100%;
margin-top: 20px;
border: 1px solid black;
display: flex;
justify-content: flex-start;
}
.div {
overflow: hidden;
white-space: nowrap;
border-right: 1px solid black;
text-align:center;
}
.div:first-child {
min-width: 36px;
background: #999;
}
.div:not(:first-child) {
width: 100%;
transition: width 1s;
}
.div:not(:first-child) span {
background: #ddd;
}
.div:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click on the div you want to fit/reset (except the first div)
<div class="wrapper">
<div class="div"><span>Fixed</span></div>
<div class="div"><span>Fluid (long long long long long text)</span></div>
<div class="div"><span>Fluid</span></div>
<div class="div"><span>Fluid</span></div>
</div>这是jsfiddle：
https://jsfiddle.net/zajsLrxp/1/
编辑：这是在大家的帮助下我的工作解决方案（在窗口调整大小上更新的大小+ div数和动态计算的第一列宽度）：
var tableWidth;
var expanded = '';
var fixedDivWidth = 0;
var flexPercentage = 100/($('.column').length-1);
$(document).ready(function() {
// Set width of first fixed column
$('.column:first-child .cell .fit').each(function() {
var tempFixedDivWidth = $(this)[0].getBoundingClientRect().width;
if( tempFixedDivWidth > fixedDivWidth ){fixedDivWidth = tempFixedDivWidth;}
});
$('.column:first-child' ).css('min-width',fixedDivWidth+'px')
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
})
$(window).resize( function() {
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
})
$(document).on("click", ".column:not(:first-child)", function(e) {
var thisInd =$(this).index();
// if first click on a fluid column
if(expanded != thisInd)
{
var fitDivWidth=0;
// Set width of selected fluid column
$(this).find('.fit').each(function() {
var c = $(this)[0].getBoundingClientRect().width;
if( c > fitDivWidth ){fitDivWidth = c;}
});
tableWidth = $('.mainTable')[0].getBoundingClientRect().width;
$(this).css('flex','0 0 '+ 100/(tableWidth/fitDivWidth) +'%')
// Use remaining space equally for all other fluid column
$('.column').not(':first').not(this).css('flex','1 1 '+flexPercentage+'%')
expanded = thisInd;
}
// if second click on a fluid column
else
{
//Reset all fluid columns
$('.column').not(':first').css('flex','1 1 '+flexPercentage+'%')
expanded = '';
}
});body{
font-family: 'Arial';
font-size: 12px;
padding: 20px;
}
.mainTable {
overflow: hidden;
width: 100%;
border: 1px solid black;
display: flex;
margin-top : 20px;
}
.cell{
height: 32px;
border-top: 1px solid black;
white-space: nowrap;
}
.cell:first-child{
background: #ccc;
border-top: none;
}
.column {
border-right: 1px solid black;
transition: flex 0.4s;
overflow: hidden;
line-height: 32px;
text-align: center;
}
.column:first-child {
background: #ccc;
}
.column:last-child {
border-right: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="text">Click on the header div you want to fit/reset (except the first one which is fixed)</span>
<div class="mainTable">
<div class="column">
<div class="cell"><span class="fit">Propriété</span></div>
<div class="cell"><span class="fit">Artisan 45</span></div>
<div class="cell"><span class="fit">Waterloo 528</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Adresse</span></div>
<div class="cell"><span class="fit">Rue du puit n° 45 (E2)</span></div>
<div class="cell"><span class="fit">Chaussée de Waterloo n° 528 (E1)</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Commune</span></div>
<div class="cell"><span class="fit">Ixelles</span></div>
<div class="cell"><span class="fit">Watermael-Boitsfort</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Ville</span></div>
<div class="cell"><span class="fit">Marche-en-Famenne</span></div>
<div class="cell"><span class="fit">Bruxelles</span></div>
</div>
<div class="column">
<div class="cell"><span class="fit">Surface</span></div>
<div class="cell"><span class="fit">120 m<sup>2</sup></span></div>
<div class="cell"><span class="fit">350 m<sup>2</sup></span></div>
</div>
</div>这是一个完整的示例（样式+填充+更多数据）：
https://jsfiddle.net/zrqLowx0/2/
谢谢你们 ！
1
请足够友好地为您的问题添加最终结果，以显示所有这些之后您创建的内容。我对它的外观很感兴趣。谢谢！（...也许对它的用途有一些了解？...）
—
Rene van der Lende
好的，一旦我从所有不必要的元素中清除了脚本（我想几分钟后）后，我就会这样做。也就是说，我该怎么做？即使Azametzin的回答非常好，我是否也只编辑原始帖子并添加我的观点？我更改了一些内容，但还是有90％相同（不过，我很乐意向您展示）..
—
Bachir Messaouri
重点是：我模拟一种Excel电子表格，希望人们能够单击特定的列以适合其内容。通常情况下，一个表可以工作，但是按我想要的方式调整列大小时，列的行为不正确（一次可以轻松扩展一列，但是很难实时地使其他列以占据剩余空间的方式工作） flex会对div起作用。它们只是不规律地扩展。我做了一些研究，而我想要的表是不可能的。还有其他原因，我不使用表或数据表，但这超出了本文的范围。
—
Bachir Messaouri
足够容易，只需单击“编辑”，转到问题的结尾并开始添加一些琐碎的思考，包括一个新的代码片段（全部）。确保默认情况下“隐藏摘要”（左下方的复选框），以减少对“新读者”的干扰/干扰。我的第一个想法是，您将把它用于一些像'harmonica'这样的小部件，图标和所有其他东西。电子表格吧，我确实有一些全屏显示，使用此处讨论的相同原理（如果您有兴趣）在整个位置上/下/左/右延伸。
—
勒内·范德·伦德
太好了，您付出了更多努力，发布了最终结果。使回答问题变得更加有意义！…...
—
Rene van der Lende