html - 大于动态宽度父项时，弹性项目上的滚动条

问题描述

我有一个居中的 flexbox 结构，它显示带有客户列表的框。

我想实现，当屏幕变得比#boxdiv 内的内容窄时，它不会隐藏在视口之外，而是将溢出添加到最长的项目，它#list与表格一起，因此#box可以动态缩小。

width: 100%当我添加但我不希望框全屏宽度时，它应该像它应该的那样工作，#box直到它至少不是内容的大小。

body, html {
  
  margin: 0;
  width: 100%;
  height: 100%;
 font-size: 16px;
  
}

* {
  
  box-sizing: border-box;
  
}

#wrap {
  
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  flex-direction: column;
  
}

#box {
  
  background-color: #dcdcdc;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  /*width: 100%; this works, but dont want it full until box is equal or smaller than content*/
  
  
}

#box > div {
  
  flex: 1 0 auto!important;
  
}

#title {
  
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
  color: blue;
}

table {
  
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: auto;
  white-space: nowrap;
  width: 100%;
}

table thead {
  
  font-weight: bold;
}

table tbody tr {
  
  height: 30px;
}

table td {
  
  padding: 0 5px;
}

#list {
  
  overflow: auto;
  background-color: rgba(0,0,0,0.05);
  
}

<div id="wrap">
    <div id="box">
      <div id="title">
      List of customers
      </div>
      <div id="list">
      <table>
        <thead>
          <tr>
            <td>First name</td>
            <td>Last name</td>
            <td>Address</td>
            <td>Telephone</td>
            <td>Decription</td>
          </tr>
        </thead>
        <tbody>
           <tr>
            <td>John</td>
            <td>Smith</td>
            <td>25th Jeffersons</td>
            <td>555 2589654123</td>
            <td>Pretty bad boy</td>
          </tr>
          <tr>
            <td>Anna</td>
            <td>Redford</td>
            <td>Trading street 252</td>
            <td>555 2541258745</td>
            <td>Booty babe</td>
          </tr>
          <tr>
            <td>Jack</td>
            <td>Jackson</td>
            <td>Dummy Dumm 55</td>
            <td>555 123456789</td>
            <td>Random persona</td>
          </tr>
          <tr>
            <td>Buck</td>
            <td>Buckson</td>
            <td>Dummy Dumm 66</td>
            <td>555 987654321</td>
            <td>Another random persona</td>
          </tr>
        </tbody>
      </table>
      </div>
  </div>
</div>

1 - 全屏窗口

2 - 调整大小（更小）的窗口

3 - 调整大小（更小）的窗口 - 想要的结果

1 2

标签： htmlcssflexbox

html - 大于动态宽度父项时，弹性项目上的滚动条

问题描述

解决方案

推荐阅读