CSS实现带<p>段落的水平滚动时段落块级显示问题求助

Hey there! Let's troubleshoot your horizontal scroll issue together. I see what's going on with your code—let's break it down and fix it step by step.

What's Causing the Problem? #

Looking at your CSS, there are a few conflicting properties making your .part elements behave like inline content instead of distinct block-level boxes:

• You added flex-wrap: wrap to .part—this tells the flex container (your .part div) to wrap its children onto multiple lines, which directly conflicts with your horizontal scroll goal.
• display: inline-block on .part is unnecessary here since .scroll is a flex container; flex items have their own layout behavior that overrides inline-block styling.
• width: auto without a minimum or fixed width lets .part shrink to fit its content, making it look like inline content rather than a standalone block.

The Fixed Solution #

Here's how to adjust your CSS to get block-level .part elements that scroll horizontally as intended:

.scroll {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  /* Removed white-space: nowrap—flex row layout doesn't need this to prevent wrapping */
  padding: 8px 0; /* Optional: adds vertical padding for better spacing */
}

.part {
  flex: 0 0 auto; /* Critical: tells flex item not to shrink/grow, keep its width */
  width: 300px; /* Give each block a fixed width to enforce block-level appearance */
  height: 200px;
  margin-right: 16px; /* Optional: adds space between blocks */
  border: 1px solid #e0e0e0; /* Optional: visual border to see each block clearly */
  padding: 12px;
}

.part p {
  display: block; /* Ensures the paragraph behaves as a block (default for <p>, but explicit here for clarity) */
  margin: 0;
  line-height: 1.6;
}

Full Working Example #

Here's the complete HTML/CSS to test the fix immediately:

<!DOCTYPE html>
<html>
<head>
<style>
.scroll {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 8px 0;
}

.part {
  flex: 0 0 auto;
  width: 300px;
  height: 200px;
  margin-right: 16px;
  border: 1px solid #e0e0e0;
  padding: 12px;
}

.part p {
  display: block;
  margin: 0;
  line-height: 1.6;
}
</style>
</head>
<body>
<div class="scroll">
  <div class="part">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="part">
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="part">
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>
</div>
</body>
</html>

Quick Notes #

• If you don't want a fixed width, replace width: 300px with min-width: 250px—this lets .part expand to fit longer content but keeps it from shrinking too small.
• The flex: 0 0 auto rule is key: it prevents flex items from being compressed or stretched, ensuring each block stays intact as you scroll horizontally.

内容的提问来源于stack exchange，提问作者Tom Kuntz