Question

我遇到一些问题，因为在Flexbox布局内部有一个表格在父Flexbox之外流血，使得页面比浏览器宽度更宽。这是一个模型，显示了我遇到的类似问题。

#flex {
  display:flex;
  display:-webkit-flex;
  flex-direction: row;
}
#one {
  background-color: black;
  width: 300px;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}
#two {
  background-color:red;
}

<div id="flex">
  <div id="one">one
  </div>
  <div>
    <table>
      <tr>
        <td>First Row</td>
        <td>Second Row</td>
        <td>Third Row</td>
        <td>Fourth Row</td>
        <td>Fifth Row</td>
        <td>Sixth Row</td>
        <td>Seventh Row</td>
        <td>Eighth Row</td>
        <td>Ninth Row</td>
        <td>Tenth Row</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>DataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataDataData</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </table>
  </div>
</div>

您可以看到即使.flex只是屏幕的宽度，.two也要宽得多。

我在第二个div中使用数据表，因此表格大小是动态的，即使设置了孩子的最大宽度和所有内容，我也无法让它停止流血。我需要帮助搞清楚如何锁定flexbox的第二个div以让表格正确调整大小（它有响应元素，但不会被使用b / c它只是变宽）。

编辑：似乎表格正在完成页面的100％宽度，但是由于左边的元素，它会超出右边的边距。

感谢您的帮助。

Answer 1

上面的答案对我没什么用，但是做了什么工作：

我遇到了问题，因为这两个表直接进入了flexbox容器。显然，表格自动采用与围绕它的div相同的大小，即使这是一个flexbox容器...

所以，只需在Flexbox中放入两个div并将表格放入div中：

    <form method="post" action="<?php echo VPATH; ?>searchHotel/Singapore/1" style="margin: 0;">
        <a href="javascript:void(0);" onclick="$(this).closest('form').submit()"  >
            <img src="<?php echo IMAGE; ?>hotl02.jpg" class="img-responsive" alt="Responsive image">
        </a>
        <input type="hidden" name="city" value="Singapore" />
        <input type="hidden" name="checkindate" value="<?php echo $today; ?>" />
        <input type="hidden" name="checkoutdate" value="<?php echo $posttoday; ?>" />
    </form>

然后，如果您仍有问题，请确保您的表具有此CSS：

<div style="display:flex;">
    <div><table> table content </table></div>
    <div><table> table content </table></div>
</div>

Answer 2

首先，设置正文：

body {  
  width:100vw;
  height:100vh;
  margin: 0px;
}

然后，让最大的容器#flex { max-width: 100%;和您的table { word-break: break-all;

codepen

Answer 3

就我而言，table 是 flex 的间接后代，所以
<div class="table-wrapper" style="overflow: auto;"><table></table></div> - 不起作用（页面仍然被表格溢出）
解决方案是将 overflow: auto; 放在直接 flex child

Flexbox中的表格比页面更宽

3 个答案: