我希望特定高度的 div 可以根据需要增加宽度以容纳文本答案

【问题标题】：I want a div of specific height to grow in width as necessary to accommodate text我希望特定高度的 div 可以根据需要增加宽度以容纳文本
【发布时间】：2021-03-31 02:34:50
【问题描述】：

如下面的示例所示，我希望特定高度的 div 的宽度仅增长到容纳其文本所需的宽度，但我做不到

我希望它看起来像这样

body{
  overflow-x: scroll;
  
}
.container{
  display: flex;
  flex-direction: row;
  width: max-content;
  
  
}

.item{
  
  width: min-content ;
  max-height: 3em;
  border: 1px solid red;
  
}

<body>
<div class="container" >
  <div class="item"> sid jkodasjkadf kadsf kas</div>
  <div class="item"> salkf hjahsadkjhfgadsakjsl</div>
  <div class="item"> saf nasd kmfgdn skjdsj</div>
  <div class="item"> sjfn sdnf sdmfosdj md faikmoa fia</div>
  <div class="item"> siiojasd oiasdi </div>
  <div class="item"> alksj fksdafja</div>
  <div class="item"> sid jkodas jkadf kadsf kas</div>
  <div class="item"> salkf hjahsadkjhfga dsakjsl</div>
  <div class="item"> saf nasd kmfgdn skjdsj</div>
  <div class="item"> sjfn sdnf sdmfosdj md faikmoa fia</div>
  <div class="item"> siiojasd oiasdi </div>
  <div class="item"> alksj fksdafja</div>
</div>
</body>

【问题讨论】：

@Paulie_D 我希望项目 div 具有动态宽度以适合其中的文本。同时我希望 div 有一个固定的高度。
我添加了一张图片，希望这更有意义@Paulie_D
您不能使用固定的最小内容高度和宽度来做到这一点。二选一，
@Paulie_D 你知道有什么办法吗？
不，充其量你需要javascript，但这不是文本布局的方式。它要么以确定的宽度换行，要么不换行，你只会得到一行。

标签： css flexbox

【解决方案1】：

试试这个，

.container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.item{
  max-height: 3em;
  border: 4px solid red;
  padding:1rem;
}

【讨论】：