css - 在元素之间绘制边框，无论它们是并排放置还是换行

Question

我有两个内联 block ，A 和 B，都是可变尺寸:

<container style="display: flex; flex-wrap: wrap">
    <div>Arbitrary content A</div>
    <div>Arbitrary content B</div>
</container>

根据它们的内容和屏幕尺寸，它们可能并排放置，或者 B 可能需要换行。正如所展示的，这很容易通过 flexbox 实现。

但无论最终以何种方式布局，我都想在两个 block 之间画一条线，如下所示:

AAA │ BBB
AAA │ BBB

AAA
AAA
───
BBB
BBB

通常你会用媒体查询来解决这种布局问题，但因为布局是基于内容的，所以媒体查​​询不会削减它。

在排除媒体查询的情况下，我想不出任何实现此目的的好方法——任何像 border 这样的东西都适用于指定的边缘，并且不能依赖于布局.

我不介意使用什么布局技术，即使需要添加更多 DOM 节点才能使其工作，只要不需要 JavaScript。我很确定 Grid 无法工作，因为这需要像 grid-template-columns: repeat(auto-fit, auto) 这样的东西，它不起作用(auto-fit 要求固定尺寸)。

我只关心两项的大小写；三个或更多变得更加困惑，我相当有信心它无法用手头的工具解决，而两个感觉可能是可以解决的。

有人对画这个边框有什么想法吗？

Answer 1

如果这里不需要透明度是一个涉及一些背景的解决方案，您可以在其中轻松控制线条的大小:

.container {
  display: flex;
  flex-wrap: wrap;
  border:1px solid;
  margin:10px;
  background:
    linear-gradient(red,red) center
    /
    calc(100% - 2*2px - 100px) /* length of horizontal line (we at least remove the thickness of the vertical line)*/
    calc(100% - 2*1px - 10px) /* length of vertical line (we at least remove the thickness of the horizontal line)*/
    no-repeat;
}
.container > * {
  padding:20px;
  background:#fff;
  flex-grow:1;
  margin:1px 2px; 
   /* 1px*2 = thickness of the horizontal line */ 
   /* 2px*2 = thickness of the vertical line */
}

<div class="container" >
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel venenatis sapien, </div>
  <div>Arbitrary content B</div>
</div>

<div class="container" >
  <div>Lorem ipsum dolor sit amet </div>
  <div>Arbitrary content B</div>
</div>