1

I have 3 flex items here, but the width of 2nd item is larger than others, since the description of 2nd item is very long. enter image description here

Is it possible to make all flex items to have equal height and width but not using fixed value of height and weight, when the content of description changes.

App.js

import "./styles.css";

export default function App() {
  const containerStyles = {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "green",
    marginRight: "10px",
    flex: 1
  };

  return (
    <div style={{ display: "flex" }}>
      <div style={containerStyles}>
        <div>Title 1</div>
        <div>Description 1</div>
        <div>Click to view detail</div>
      </div>
      <div style={containerStyles}>
        <div>Title 2</div>
        <div>Description 2 veryyyy longgggggggggggggggggggggg</div>
        <div>Click to view detail</div>
      </div>
      <div style={containerStyles}>
        <div>Title 3</div>
        <div>Description 3</div>
        <div>Click to view detail</div>
      </div>
    </div>
  );
}

Codesandbox
https://codesandbox.io/s/crazy-cookies-nw0ykj

CCCC
  • 5,665
  • 4
  • 41
  • 88

3 Answers3

2

The middle box is big because of a unbreakable word longgggggg.... If you overflow it to the next line, things are going to work fine for you. Setting the overflow-wrap property to anywhere should work.

Try setting it for the flex container

  const containerStyles = {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "green",
    marginRight: "10px",
    flex: 1,
    overflowWrap: 'anywhere',
  };

So you can see the text being cut in order to respect the width of the container so that you have equal width and height.

After applying overflow

samuellawrentz
  • 1,662
  • 11
  • 23
1

Since I forgot you need the same width as well, I've modified my answer.

In your case, use both justify-content: space-between to made the child element height inside flexbox looks like equal, and overflow-wrap: anywhere to let the longer text to be wrapped to made flex items have same width.

enter image description here enter image description here

Kurt
  • 678
  • 1
  • 7
  • 24
1

Your long word is what's breaking it. You need to set overflow to anything other than visible. You can also add in the word-wrap property to keep everything visible.

const containerStyles = {
    display: "flex",
    flexDirection: "column",
    backgroundColor: "green",
    marginRight: "10px",
    flex: 1,
    "word-wrap": "break-word",
    overflow: "hidden"
  };
MonsterBasket
  • 134
  • 4