英文:
Wrapped flexbox element overflowing its parent container
问题
我正在使用 flexbox 以列的方式组织我的条目，然后，如果没有更多垂直空间可用，它们会换行到下一列。
我的代码：
<div style="width:800px;display:flex;flex-wrap:wrap;flex-direction:column;background:rgb(230, 230, 230);height:300px;">
<div style="border:1px solid red;">
<div style="border:1px solid blue;">这是一个简短的文本。</div>
</div>
[...]
<div style="border:1px solid red;">
Lorem ipsum dolor sit amet...
</div>
</div>
我期望的结果：
换行的 flex 元素只填充剩余的空间。
我实际得到的结果：
换行的 flex 元素溢出了其父容器。
我尝试了几种 flex-grow、flex-shrink、word-wrap 等组合，但没有成功。尽管有很多关于 flexbox 问题的帖子，但我没有找到与我的问题相关的帖子。这真的是 flexbox 的限制，还是我遗漏了什么？
英文:
I am using flexbox to structure my entries column-wise and then, if no further vertical space is available, wrap them to the next "column".
My code:
<div style="width:800px;display:flex;flex-wrap:wrap;flex-direction:column;background:rgb(230, 230, 230);height:300px;">
<div style="border:1px solid red;">
<div style="border:1px solid blue;">Thats a short text.</div>
</div>
[...]
<div style="border:1px solid red;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
What I expect:
The wrapped flex element just fills the remaining space.
What I get
The wrapped flex element overflows its parent container.
I tried several combinations of flex-grow, flex-shrink, word-wrap and so on, but without a success.
Although there are mass of threads regarding flexbox issues, I haven't found a thread that deals with my problem. Is this really a limitation of flexbox or did I miss something?
答案1
得分: 1
Flexbox对于这种情况可能过于复杂，具体取决于你的需求。例如，你可以简单地使用columns：
<div style="width:800px;columns:2;background:rgb(230, 230, 230);height:300px;">
<div style="border:1px solid red;">
<div style="border:1px solid blue;">这是一个简短的文本。</div>
</div>
[...]
<div style="border:1px solid red;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
英文:
Flexbox is probably overkill for this depending on what you are trying to do. For example, you could just use columns:
<div style="width:800px;columns:2;background:rgb(230, 230, 230);height:300px;">
<div style="border:1px solid red;">
<div style="border:1px solid blue;">Thats a short text.</div>
</div>
[...]
<div style="border:1px solid red;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
答案2
得分: 1
你可以在所有短文本的容器上使用margin-right: auto;，或者可以使用CSS类或SASS变量来避免重复的代码。 Flexbox1
然而，如果你想垂直对齐下面的Lorem段落，你可以看到我在flexbox-vertical1中使用了2个不同的容器（container1用于短文本，container2用于Lorem段落）。我从父容器中移除了flex-wrap，并将其添加到container1的样式中：style="display: flex; flex-wrap: wrap"。
在flexbox-vertical2中添加了flex的增长、收缩和宽度，但除非你知道容器占据的空间百分比，否则这并不理想。我从父容器中移除了flex-wrap，并将其添加到container1的样式中：style="display: flex; flex-wrap: wrap; flex: 0 0 70%”。
英文:
You can use margin-right: auto; on all the containers of short text or you can use CSS class or SASS variable to not repeat code. Flexbox1
However, if you want to vertically align the below Lorem paragraph too, you can see flexbox-vertical1 where I used 2 different containers (container1 for short text and container2 for Lorem paragraph). I removed flex-wrap from parent container and added this to container1 style="display: flex; flex-wrap: wrap">
Added flex growth, shrink, & width too in flexbox-vertical2, but not ideal unless you know the percentage of space the containers take. I removed flex-wrap from parent container. Added this to container1 style="display: flex; flex-wrap: wrap; flex: 0 0 70%".
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论