javascript - 内容超出div高度后扩展div的宽度

Question

我最近一直在研究 CSS flex，并尝试用它来完成一些简单的任务。其中一项任务是制作一个时间线，交替元素位于中线上方或下方。

我希望能够设置一个初始宽度和固定高度，这样当内容超过div的高度溢出时，宽度会扩大以容纳内容，希望不会溢出。

https://codepen.io/anon/pen/roVOXB

<div class="content">
  <div class="box">
    <div class="above">Content of the div</div>
    <div class="below"></div>
  </div>
  <div class="box">
    <div class="above"></div>
    <div class="below">Content of the div</div>
  </div>
  <div class="box">
    <div class="above">Content of the div</div>
    <div class="below"></div>
  </div>
  <div class="box">
    <div class="above"></div>
    <div class="below">Content of the div</div>
  </div>
  <div class="box">
    <div class="above">Content of the div</div>
    <div class="below"></div>
  </div>
</div>

.content {
  display: flex;
}

.box {
  display: flex;
  flex-direction: column;
}

.above, .below {
  height: 350px;
  display: flex;
  min-width: 300px;
  border: 1px solid #000;
}

.above {
  display: flex;
  align-items: flex-end;
  background: orange;
}

.below {
  display: flex;
  align-items: flex-start;
  background: aqua;
}

我知道这可能是一个简单的解决方案，它正对着我，但我已经尝试了最大宽度、最大高度、溢出和环绕文本的所有方法，但到目前为止，没有任何方法可以帮助我实现预期的结果.

如果有任何帮助，我将不胜感激。谢谢!

Answer 1

您可以使用以下 JS 动态更改元素:

var allElements = document.querySelectorAll('.below, .above');
allElements.forEach((Ele) => {
  if(Ele.scrollHeight > 350){
    Ele.style.minWidth = (Ele.scrollHeight) + "px";
  }
});

什么是它遍历类为 below 和 above 的所有元素，然后检查它使用的高度是否大于 height: 350px，如果是 > 350px，那么它会相应地调整。

只需在您的 codepen JS 编辑器中添加上面的 JS 代码，就可以开始了。尝试向其中添加更多内容，它会动态更改宽度而不会溢出。