CSS-停靠一个面板并滚动其他面板

Question

我必须将两个面板彼此相邻放置。

左侧面板具有可变宽度，并且已固定。 右侧面板应在其余宽度上扩展，并在必要时包括滚动条。

我尝试过：

.container {
  width:100%;
}
.scroll-panel {
  float:right;
  overflow-x: auto;
  white-space: nowrap
  width:calc(100% - 250px - 5px);
}
.fixed-panel{
  width:250px;
  float:left;
}

<div class="container">
   <div class="scroll-panel">...</div>
   <div class="fixed-panel">...</div>
</div>
  

效果很好，但在这种情况下，我在CSS中写了宽度（250px）。我必须在左侧面板中支持自动宽度。

我搜索了一个解决方案，但没有找到任何东西。 有人知道这种情况的解决方案吗？

谢谢。

Answer 1

在父容器中使用display: flex，使两个div共享水平空间，并删除其子级的float。

对于滚动面板，请添加flex-grow: 1，以使其占据所有剩余空间。

.container {
  width:100%;
  display: flex;
}

.scroll-panel {
  overflow-x: auto;
  white-space: nowrap
  flex-grow: 1;
}

.fixed-panel{
}

希望这对您有用：）

Answer 2

添加到固定面板：

from tensorflow.python.client import device_lib
device_lib.list_local_devices()

希望有帮助。