“边框”不会呈现其容器的整个宽度[重复]答案

【问题标题】："Border" doesn't render the entire width of its container [duplicate]“边框”不会呈现其容器的整个宽度[重复]
【发布时间】：2021-03-19 22:50:50
【问题描述】：

我正在尝试显示系统中的项目列表。

项目列表允许用户查看每行的大量信息。用户可以向此视图添加其他列，从而使行更长。

我希望能够在此信息中垂直和水平滚动。添加其他列时，我希望能够水平滚动以查看新信息。

滚动工作如我所料。但是，这些行中的每一行下面都有一个边框。奇怪的是，边框只扩展到浏览器的宽度。当我水平滚动时，边框被切断：

这是我的代码的基本示例，用于演示它：

<div style="overflow-x: scroll;">
  <div style="border-bottom: 1px solid red; display: flex;">
    <div style="padding: 15px; white-space: nowrap; ">Item Name</div>
    <div style="padding: 15px; white-space: nowrap; ">Item Owner</div>
    <div style="padding: 15px; white-space: nowrap; ">Date Created</div>
    <div style="padding: 15px; white-space: nowrap; ">Additional Information</div>
    <div style="padding: 15px; white-space: nowrap; ">Additional Metadata</div>
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div>
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div>
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div>
  </div>
</div>

【问题讨论】：

您的问题说您使用的是 CSS 网格，但您的代码示例使用了 display: flex。
你是对的，我会改变它。我认为它添加了额外的上下文，但我可以看到它是如何不相关且可能令人困惑的！
边框确实呈现了您放置它的元素的整个宽度。默认情况下，div 元素会拉伸到其父元素宽度的 100%，因此在您的情况下，您的元素会溢出。如果你在弹性容器上添加overflow: hidden，你会立即看到。
inline-flex 代替 flex + min-width:100%

标签： css

【解决方案1】：

您可以将width: max-content 添加到中间div 中，这样它将包装其所有内部内容（在您的示例中溢出）。

<div style="overflow-x: scroll;">
    <div style="border-bottom: 1px solid red; display: flex; width: max-content">
        <div style="padding: 15px; white-space: nowrap; ">Item Name</div>          
        <div style="padding: 15px; white-space: nowrap; ">Item Owner</div>          
        <div style="padding: 15px; white-space: nowrap; ">Date Created</div>          
        <div style="padding: 15px; white-space: nowrap; ">Additional Information</div>          
        <div style="padding: 15px; white-space: nowrap; ">Additional Metadata</div>       
        <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div>       
        <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div>       
        <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div>       
    </div>
                    
</div>

【讨论】：