时间戳

首页 > 解决方案 > 在 flexbox 实现的第二列中创建一个可滚动的 div

html - 在 flexbox 实现的第二列中创建一个可滚动的 div

问题描述

我有以下代码，包括：

问题是可滚动的 div 没有包含在右侧空间中。

我究竟做错了什么？

如何确保 div 实际滚动并且不会超出屏幕宽度？使用固定宽度的组件很容易，但是如何使用可变宽度的屏幕呢？

html, body {
  width: 100%;
}
.outer {
  display: flex;
  width: 100%;
}
.left {
  flex-shrink: 0;
  margin-right: 15px;
  background-color: #ddd;
}
.right {
  flex: 1
}

.scrollable_box {
  width: 100%;
  overflow-X: scroll;
  border: solid black 1px;
}

.title {
  text-align: center;
  font-weight: bold;
}
<html>
<body>
<div class="outer">
  <div class="left">
    <div>Some Item Here</div>
    <div>Some Other Item Here</div>
    <div>Another Item</div>
  </div>
  <div class="right">
    <div class="title">Welcome to the Home of the scrollable Box</div>
    <p>This box you see below should not extend beyond the screen</p>
    <p>Notice how the title also appears far to the right because of this issue</p>
    <div class="scrollable_box">
        <table>
          <tbody>
              <tr>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
              </tr>
          </tbody>
        </table>
    </div>
  </div>
</div>
</body>
</html>

标签： htmlcssscrollflexbox

解决方案

经过几个小时试图弄清楚这一点，看起来我所要做的就是添加min-width: 0;到右侧的 flexbox 中。

我不确定这是否是一种“hacky”方式来实现这一点，或者是否有合适的方式我应该这样做。我将不胜感激这方面的任何反馈。

请参阅此处了解更多信息。

html, body {
  width: 100%;
}
.outer {
  display: flex;
  width: 100%;
}
.left {
  flex-shrink: 0;
  margin-right: 15px;
  background-color: #ddd;
}
.right {
  flex: 1;
  min-width: 0;
}

.scrollable_box {
  width: 100%;
  overflow-X: scroll;
  border: solid black 1px;
  padding-bottom: 15px;
}

.title {
  text-align: center;
  font-weight: bold;
}
<html>
<body>
<div class="outer">
  <div class="left">
    <div>Some Item Here</div>
    <div>Some Other Item Here</div>
    <div>Another Item</div>
  </div>
  <div class="right">
    <div class="title">Welcome to the Home of the scrollable Box</div>
    <p>This box you see below should not extend beyond the screen</p>
    <p>Notice how the title also appears far to the right because of this issue</p>
    <div class="scrollable_box">
        <table>
          <tbody>
              <tr>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
              </tr>
          </tbody>
        </table>
    </div>
  </div>
</div>
</body>
</html>

推荐阅读