How can I make the block containing text in Webflow grow to the same height as the text, without it pushing up or down the "hide text" button?

You want the text container to expand vertically with the text while keeping the "hide text" button in a fixed position (e.g., at the bottom of the block). This is a common layout issue in Webflow when using expanding/collapsing text blocks.

​

1. Set the Right Structure

​

• Wrap all elements (text block and "hide text" button) in a div block (e.g., Text Wrapper).
• Inside this wrapper, have two children:
• The text element (the content you want to expand/collapse).
• The "Hide Text" button.

​

2. Apply Correct Flexbox Settings

​

• Select the Text Wrapper (parent container).
• Set Display to Flex → Vertical (Column).
• Set Justify to Space Between.
• Set Align to Start (horizontal alignment is usually not relevant here but ensures consistency).
• Ensure Height is set to Auto or not defined (avoid "Fixed" heights).

​

3. Configure the Text Block

​

• Set the text block to have Height: Auto.
• Use interaction settings (like Webflow’s Hide/Show or Size transform) to control expansion and collapse.
• Enable Overflow: Hidden on both the Text Wrapper and the text block only if you animate height.

​

4. Keep Button Position Fixed

​

• The "Hide Text" button will remain at the bottom of the Text Wrapper due to the Space Between setting.
• Avoid setting any margins that force the button's position to shift when text expands.

​

5. Responsive Tip

​

• Make sure none of the container divs have a min-height or max-height that could restrict vertical growth.
• Test in multiple sizes to ensure the button maintains its position.

​

Summary

​

Structure your layout with a flex column container using Space Between, ensure the text block has auto height, and the button is part of the same flex container. This allows the text container to grow with content without pushing the "hide text" button.