React项目中折叠div时内容被挤压，无法定位原因求解决方案

Hey there! Let's work through this div squeezing issue you're hitting—super common when building collapsible components in React, so you're definitely not alone here 😊

Here are the most likely fixes to try, ordered by how often they solve this kind of problem:

1. Fix Flex/Grid Containment (Most Common Culprit) #

If your collapsible div is inside a flex or grid container, the default behavior might let it shrink beyond its content size. Try adding these CSS rules to your collapsible content wrapper:

.collapsible-content {
  flex-shrink: 0; /* Stops the div from being compressed by its flex parent */
  min-width: fit-content; /* Ensures it never gets narrower than its internal content */
}

If you're using grid, double-check that the column your div is in isn't set to auto or a flexible value that forces squeezing.

2. Add Overflow Control #

Even if you tried white-space: nowrap, it might not work if you haven't paired it with overflow handling. For long text or elements that shouldn't wrap, target the internal content directly:

.collapsible-content p, .collapsible-content span {
  white-space: nowrap;
  overflow-x: auto; /* Adds a horizontal scroll instead of squeezing text */
}

If you don't want scrollbars, you could also use overflow-x: hidden—just make sure your content doesn't get cut off in a bad way.

3. Adjust Your Collapse State Logic #

If you're using React state to toggle collapse (e.g., changing height or display), missing overflow: hidden is a frequent issue. Here's a clean pattern to avoid squeezing:

JSX #

import { useState } from 'react';

function CollapsibleSection() {
  const [isCollapsed, setIsCollapsed] = useState(true);

  return (
    <div className="collapsible-section">
      <button onClick={() => setIsCollapsed(!isCollapsed)}>
        {isCollapsed ? 'Expand' : 'Collapse'}
      </button>
      <div className={`collapsible-content ${isCollapsed ? 'collapsed' : ''}`}>
        {/* Your portfolio content here */}
      </div>
    </div>
  );
}

CSS #

.collapsible-content {
  transition: height 0.3s ease;
  overflow: hidden; /* Critical: hides content when collapsed without squeezing */
}

.collapsible-content.collapsed {
  height: 0;
}

.collapsible-content:not(.collapsed) {
  height: auto;
}

This setup ensures content stays contained when collapsed, instead of spilling into other elements or getting squeezed.

4. Check Parent Container Constraints #

Sometimes the issue isn't the collapsible div itself—it's a parent element with a fixed width or max-width that forces child elements to shrink. Inspect your parent containers and try:

• Setting width: fit-content on the parent if it doesn't need to fill the full width
• Removing unnecessary max-width restrictions that are too tight

If none of these work, sharing a snippet of your relevant JSX and CSS would help narrow it down further—but these steps should cover 90% of similar cases!

内容的提问来源于stack exchange，提问作者Gore Sometimes