在flexbox中与兄弟姐妹一起尊重多列文本div的宽度

Question

我无法将文本连接div到一组图像旁边flexbox.这些兄弟姐妹目前只尊重column-width文本的属性,div就好像它是一个总宽度,并且在不同的窗口大小上重叠超过它的任何宽度.图像的数量和文本的长度是动态的,因为内容可以在页面加载时改变.布局也很敏感,所以在很多情况下我没有固定尺寸的奢侈品.我相信我已经将问题简化为一个具有以下功能的工作示例:

HTML:

<div id='maincontainer'>
  <div id='text'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quibus rebus efficiuntur voluptates, eae non sunt in potestate sapientis. In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. At cum de plurimis eadem dicit, tum certe
      de maximis. Pugnant Stoici cum Peripateticis. Qua tu etiam inprudens utebare non numquam. Duo Reges: constructio interrete.</p>

    <p>Beatus autem esse in maximarum rerum timore nemo potest. Quid est, quod ab ea absolvi et perfici debeat? Quarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur. Tubulum fuisse, qua illum, cuius is condemnatus est rogatione, P.
      Si id dicis, vicimus. Cur post Tarentum ad Archytam? Que Manilium, ab iisque M.</p>
  </div>
  <img class='img__gallery' src='https://placehold.it/200x300/a00/fff'>
  <img class='img__gallery' src='https://placehold.it/200x300/a00/fff'>
  <img class='img__gallery' src='https://placehold.it/200x300/a00/fff'>
  <img class='img__gallery' src='https://placehold.it/200x300/a00/fff'>
</div>

CSS:

#maincontainer {
    display: flex;
    position: absolute;
    min-height: 300px;
    max-height: 550px;
    height: 100%;
    width: 800px; // not in original. Used to force the issue to show.
}
#text {
    position: relative;
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    column-width: 160px;
    height: 100%;
    column-gap: 20px;
    column-fill: auto;
}
.img__gallery {
  position: relative;
  display: block;
  margin-right: 20px;
}

Codepen: https ://codepen.io/anon/pen/ModaEN

按照预期,文本出现在图像之前.然而,它创建了许多160px的列,它需要适合文本内容.但是,图像不会在文本内容之后开始,而是重叠div(你几乎可以看出大部分文本在图像背后突出在CodePen示例中).通过javascript也可以解决这个问题,但感觉OTT.当然,多列文本div可以在flexbox中为自己腾出空间,而其他项目不会挤在它上面？

换一种说法:

有没有办法让内部的flex项目#maincontainer尊重并为总宽度腾出空间#text(同时#text尊重column-width所有窗口大小的属性)？

目前,其他柔性项目(图像)重叠并且不考虑其总宽度#text,或者将#text其列缩小到比column-width小窗口尺寸小得多的尺寸.鉴于我已经声明了column-width(160px)for #text,如果#text有3列,下一个flex项应该从480px + padding等开始,在文本的右边.640px +填充,如果它有4,等等

如果有人在解释我所说的尊重方面遇到困难,我会推断为它腾出空间的行为.如果元素的宽度以200px结束,则其下一个兄弟应该从200px +开始,等等.这是大多数设计师从相对定位和/或浮点数中熟悉的行为.这也是flexboxes中的常见行为.

---

更新

查询#textjavascript中的元素宽度(嗯,jquery,using $("#textcontainer").width();)返回一个与我指定column-width值相同的值.

Javascript(因此,我猜,浏览器)将#text元素的总宽度视为column-width值,这可以了解相邻的flex项目重叠#text到一列宽度的原因.我在Chrome和Safari上都证实了这一点在macOS上的最新版本.

我实际上已经使用javascript制作了一个有效的解决方案,但仍然急于避免使用它.看起来有点荒谬,这个基本的构图需要和解决这个问题一样令人费解.

UPDATE2

我不确定这个插图如何更好地澄清'我需要兄弟图像来尊重它的总宽度#text而不是重叠它',但我按照要求包含它.A是所有窗口尺寸所需的解决方案,B正在发生的事情:

Answer 1

AFAIK CSS columns 和 flexbox 基本上是不兼容的。Flex 容器不会注意到列声明。看起来，给元素列有效地将其从弹性流中取出，这就是为什么它允许文本与容器中的其他元素重叠。

我还没有阅读规范，无法详细说明这种行为是否是设计使然，这只是我可以观察到的。遗憾的是，我认为如果您的 div 中需要 CSS 列，您将不得不沿着脚本路线进行更正。我可能是错的，但目前还没有找到解决办法。

正如 IlyaStreltsyn 指出的那样，面向列的 Flex 容器也存在一个错误（https://github.com/philipwalton/flexbugs#14-flex-containers-with-wrapping-the-container-is-not-sized-to -contain-its-items）也可能与此相关。