如何将兄弟元素的宽度设置为包含长字的弹性项目

Question

我正在尝试这样做：

flex-item img 必须定义 flex-container 宽度和其他 flex-item（div 带有“a”和“aaaaaaa...”）必须进入 flex-container 但必须不会让 flex-container 变大。

此外，我不想以 px 为单位固定文本 flex-item 的宽度，因为图像宽度是动态的。 我该怎么做 不使用 javascript ?

我根据我的图片制作了这个代码片段以提供帮助：

.flex-container {
  display: flex;
  flex-direction: column;
  border: 3px blue solid;
}

.random-image {
  width: 50px;
  height: 50px;
  border: 3px red solid;
}

.first-text, .second-text {
  border: 3px orange solid;
}

.second-text {
  word-break: break-all;
}

<div class="flex-container">
  
  <div class="random-image"></div>
  
  <div class="first-text">a</div>
  
  <div class="second-text">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  
</div>

Answer 1

删除图像 div 上的固定宽度，并在 flex-container 和 random-image div 上使用 width: min-content;。这应该很适合你。

.flex-container {
  display: flex;
  flex-direction: column;
  border: 3px blue solid;
  width: min-content;
  height: fit-content;
  padding: 10px;
}

.random-image {
  border: 3px red solid;
  width: fit-content;
}

.first-text, .second-text {
  border: 3px orange solid;
}

.second-text {
  word-break: break-all;
}

.first-text {
  width: fit-content;
  margin: 1em auto 1em auto;
}

<div class="flex-container">
  
  <div class="random-image"><img src="https://dummyimage.com/600x400/000/fff"></div>
  
  <div class="first-text">a</div>
  
  <div class="second-text">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  
</div>

如何将兄弟元素的宽度设置为包含长字的弹性项目

How to set sibling element's width to flex item which contains long word

html

css

flexbox