显示: flex - 两个元素水平成 500px

Question

我正在尝试对齐 2 个水平 div。但由于某种原因，第二个 div 在#content 之外。

• #content: width: 500px;
• #flex_container：显示：flex；
• #main: 100%
• 表格：100%
• #sidebar 250px;

我需要两种情况：

首先）只有绿色表格 100%（不在#content 之外）- 侧边栏不存在

第二）两个div：表格和侧边栏水平成500px（不在#content之外）

https://jsfiddle.net/69hd4ov1/

<div id="content">
    <div id="flex_container">
        <div id="main">
           <table class="table"></table>
           <div id="sidebar"></div>
        </div>
    </div>
 </div>

谢谢

Answer 1

如果我理解正确，您需要表格右侧的绿色 div（侧边栏）。 由于您将包装器 div(main div) 声明为 500px，然后将 table 声明为 100%，因此 table 将具有 500px，并且第二个 div(sidebar) 将在 table 上重叠，因为没有可用空间。 如果你想要一个固定宽度，那么你必须分配包装器 div(content) 750px，然后是表格 500px 和侧边栏 250px。 如果您想要响应式（基于屏幕尺寸），您还可以设置 500px 包装器（或 100% 具有整个页面宽度）div 和表格 70% 和侧边栏 30% 或任何您想要的百分比。

Answer 2

* {
    margin: 0;
    padding: 0;
}
#content {
    width: 500px;
    background: Red;
    margin: 0 auto;
    height:100vh;
}
#content #flex_container {
    display: flex;
    position: relative;
    margin: 0;
  
}
table{
 table-layout: fixed;


}
#content #main {
    padding: 20px;
    color: #000;
    background: green;
    position: relative;
    max-width: 100%;
     flex:1;
      overflow-x:auto;
}
#sidebar {
    max-width: 250px;
    min-width: 250px;
    padding: 10px 20px 0 0;
    background: yellow;
    
}

<div id="content">
    <div id="flex_container">
        <div id="main">
<table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
          <th scope="col">Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
          <td>cell</td>
        </tr>
      </tbody>
    </table>
    </div>
        <div id="sidebar">SIDEBAR</div>
    </div>
</div>

Answer 3

问题是您将#content 的width 设置为500px 并将#main 的width 设置为100% 意味着它将占用其父级的所有宽度，即500px 和溢出的#sidebar 有一半的容器（250px）所以溢出你可以做的事情是有意义的，你可以将#content 的width 设置为50% 和@987654333 @ 到50% 但#sidebar 内的内容会溢出，所以增加#content 的width，如下所示

* {
  margin: 0;
  padding: 0;
}

#content {
  width: 700px;
  background: Red;
  margin: 0 auto;
  height: 100vh;
}

#content #flex_container {
  display: flex;
  position: relative;
  margin: 0;
}

#content #main {
  padding: 20px;
  color: #000;
  background: green;
  position: relative;
  width: 50%;
}

#sidebar {
  width: 50%;
  padding: 10px 20px 0 0;
  background: yellow;
}

<div id="content">
  <div id="flex_container">
    <div id="main">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
            <th scope="col">Header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
            <td>cell</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="sidebar">SIDEBAR</div>
  </div>
</div>