Question

我最近一直在研究CSS flex，并正在尝试一些简单的任务。这些任务之一是制作一个时间轴，其中交替元素在中线以上或以下。

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

<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 ，那么它将进行相应的调整。

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

Answer 2

如果列数是静态的，则可以从min-width中删除.above, .below。

将min-width: 2700px;添加到.content。

内容超过div的高度后，扩展div的宽度

2 个答案: