问题：

当滚动条大于动态宽度父项时

徐唯

2023-03-14

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

我想实现的是，当屏幕变得比#boxdiv中的内容更窄时，它不会隐藏在视口之外，而是将溢出添加到最长的项目，即#listwith table，因此#box可以动态收缩。

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

|JSFIDDLE演示|

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-调整大小（更小）的窗口-所需结果

共有2个答案

皇甫雨石

2023-03-14

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*/
max-width:100%;
  
  
}

#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;
 max-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>

堵雅健

2023-03-14

尝试添加最大宽度：100% 而不是宽度：100%对于#框-它应该可以做到这一点。

类似资料：

CSS滚动条宽度

问题内容：亲朋好友，是否可以增加放置在元素内部的滚动条的宽度？我不是在谈论浏览器本身的默认滚动条，此页面以全屏模式运行，并且由于浏览器滚动条从不显示图片，因此内部元素具有自己的滚动条。问题答案：如果您谈论的是带有（或）自动出现在滚动条上的滚动条，那么没有，那仍然是浏览器使用常规OS小部件呈现的本机滚动条，而不是可以样式化的（*）。虽然您可以按照Matt的建议，将其替换为由可样式化的d
Google Chart中的自动宽度滚动条

问题内容：我在HTML5项目中使用了Google图表。它使用JSON值（来自DB）来绘制图形。我的需求是如果JSON值中的数据大于5到6，则需要一个滚动条。我已经通过JSFiddle创建了示例附加链接。目前，我已经给出了22个值。当JSON值具有3或4个值时，我需要相同的效果。条形宽度没有任何变化，即使JSON有50个值，它也应保持相同的宽度。请给我解决方案，非常感谢。:) 这是链接：-h
当窗口宽度等于600px时，如何禁用覆盖滚动条？

我使用overlayScrollbars创建一个。当窗口宽度小于600px时，则navbar像边栏一样左转。创建一个js文件并添加这一行：现在，当我的widnow宽度小于600px时，overlayscrollbar工作很好，但是当我的窗口宽度大于600px时，overlayscrollbar仍然工作，元素宽度就像侧边栏一样。当窗口宽度大于600px时，如何禁用overlayScroll
没有固定高度的滚动条/带有滚动条的动态高度

问题内容：我有这个HTML结构：我想在主体部分（#body）中包含三个部分而不会溢出。因此，我需要在中间部分使用滚动条。我尝试了这个CSS：和这个：但是它们都不起作用。我在JSFiddle上做了一个例子。我可以仅使用CSS和HTML来做到这一点吗？我宁愿避免使用Javascript。问题答案： Flexbox是一种现代替代方案，可让您无需固定高度或JavaScript即可执行此操作
使用JavaScript获取滚动条的宽度

问题内容：以下HTML将在div.container的右侧边缘显示滚动条。是否可以确定该滚动条的宽度？问题答案：此功能应为您提供滚动条的宽度基本步骤如下：创建隐藏的div（外部）并获取其偏移宽度使用CSS溢出属性强制滚动条显示在div（外部）中创建新的div（内部）并附加到外部，将其宽度设置为“ 100％”并获得偏移宽度根据收集的偏移量计算滚动条宽度更新资料如果在Window
如何在CSS中忽略滚动条宽度？

我想把三个盒子水平地排成一行，但最后一个倒了。当我移除滚动条时，它排列得很好。所以，问题是由滚动条宽度引起的。 http://codepen.io/anon/pen/kxapap

当滚动条大于动态宽度父项时

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档