当左列采用百分比宽度时，如何使右列采用固定宽度？

Question

我正在尝试克隆 Facebook 的照片 modal/lightbox，它占据了整个屏幕的宽度。它有两部分-左边是照片，右边是评论部分。

除了一件事，我制作了容器和响应部分，它们工作得很好。右栏应该有一个固定的宽度，但正如我使用的 30%，它在小屏幕上也会变短。但 Facebook 的评论部分始终保持固定宽度，没有水平滚动，但左列响应屏幕尺寸。我的左栏对屏幕尺寸的响应非常好，但右栏变短了。我想让它保持固定并且没有水平滚动。

可能有一种方法可以使用 CSS 的 calc 函数。

请注意，我正在使用 CSS 的网格系统和 grid-template-columns 制作列。

body{
    background-color: red;
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100vh;
    background-color: green;
    display: inline-grid;
    grid-template-columns: 70% 30%;  
}

.container__image {
    background-color: blue;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.container__image img {
    max-width: 100%;
    max-height: 100vh;
}


.container__comments {
    background-color: darkgray;
}


@media ( max-width: 900px) {
    .container {
        grid-template-columns: 100%;  
    }
}

<div class="container">
      <div class="container__image" >
             <img src="https://wallpapercave.com/wp/aUdwg3C.jpg" />
      </div>

      <div class="container__comments" >comments</div>

</div>

Answer 1

为 .container 添加 grid-template-columns: 1fr 300px:

.container {
    width: 100%;
    height: 100vh;
    background-color: green;
    display: inline-grid;

    grid-template-columns: 1fr 300px;
}

右侧面板将始终为固定宽度。

当左列采用百分比宽度时，如何使右列采用固定宽度？

How can I make the right column take fixed width when left column takes a percentage width?

html

css

grid