创建一个可扩展以与中心元素的边缘相交的流动侧边栏

Question

aside {
  height: 80%;
  width: 15%;
  background-color: #0ee;
  opacity: 0.25;
  outline: 2px #0bb solid;
  position: absolute;
  top: 50%;
  left: 85%;
  transform: translate( -50%, -50% );
}

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://codepen.io/basement/pen/rzPvQx.css">
    <title>grid</title>
  </head>
  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
      width="100" height="100" class="cntr" id="grid"  
    >
      <script xlink:href="https://codepen.io/basement/pen/rzPvQx.js"></script>
      
      <text 
        x="50" y="95"
        alignment-baseline="middle" text-anchor="middle"
        class="title" 
      >SVG GRID</text>
      
      <g id="drwing">   
        <circle cx="60" cy="40" r="0.5" fill="#0cc" opacity="0.9" />
      </g>
    </svg>
    
    <aside></aside> <!-- the relevant element -->
    
    <script src="https://codepen.io/basement/pen/LjqmML.js"></script>
  </body>
</html>

我们如何使上面代码片段中的 aside 元素（浅绿色）恰好占据网格右边缘和浏览器右边缘之间的 space window?

aside 元素的左边缘应该恰好接触到网格的右边缘。 aside 元素的右边缘应该延伸到浏览器的最末端 window （在右边一侧）。

响应式： 请记住，aside 元素需要响应式，并且该元素的左右边缘都需要保持在浏览器的网格和右边缘 window 分别与浏览器的宽度无关 window.

换句话说，无论浏览器尺寸如何，我们只需要将 aside 元素从网格精确地拉伸到 window 的末尾。

给元素这个 CSS:

aside {
  height: 80%;
  width: 15%;
  background-color: #0ee;
  opacity: 0.25;
  outline: 2px #0bb solid;
  position: absolute;
  top: 50%;
  left: 85%;
  transform: translate( -50%, -50% );
}

不幸的是，

不起作用，因为当 window 调整大小时，元素显然没有接触到边缘并且在 x 方向上不正确地平移。有什么想法吗？

请全屏查看页面顶部的代码段并调整 window 的宽度以查看上述不正确的行为。

预期行为示例：

Answer 1

如果您希望它脱离流程，那么一种选择是使用 "magic number"。幻数是您使用 "just works" 的硬编码特定值的地方。它很脆弱，但有时是必要的。

为此，网格宽度为 10rem。所以你可以这样做：

aside {
    position: absolute;
    right: 0;
    left: calc(50vw - 5rem); /* half width - 10rem / 2 */
}

编辑：Here's a jsfiddle to show it in action.

创建一个可扩展以与中心元素的边缘相交的流动侧边栏

Create a fluid sidebar that expands to meet the edge of a center element

html

javascript

css

resize