How can I make a flex element be the width of its content?-CodePudding

The red line is the maximum width of the container, the green line is the width of the flex element (.card class).

I set the class:

.card flex: 0 0 auto;

And as a result I get not clear width going outside the container (this is by the way very strange I did not expect to get this). If I set the .card class to

flex: 0 1 auto;

the element stretches to the full width of the container. But I need the flex element to be equal to the width of its content instead of stretching it to the full width of the container.

Why does the flex-element behave so strangely? How can I make a flex-element have the width of its content?

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 10px;
}

.container {
  max-width: 1050px;
  margin: 0 auto;
  width: 100%;
  border: 2px solid red;
}

.row {
  display: flex;
}

.card {
  flex: 0 0 auto;
  border: 2px solid green;
}

.card__row {
  align-items: flex-end;
}

.card__column--text {
  flex: 0 0 595px;
}

.card__column--img {
  flex: 0 0 auto;
  padding-right: 125px;
}

.card__pos {
  font-size: 15px;
  line-height: 146.5%;
  letter-spacing: 0.02em;
  color: #818181;
}

.card__text {
  font-size: 28px;
  line-height: 134.5%;
  letter-spacing: 0.02em;
  color: #000;
  margin: 0 0 30px 0;
}

.card-author-name {
  display: flex;
  align-items: center
}

.card-author-name__text {
  font-size: 24px;
  line-height: 138.5%;
  letter-spacing: 0.02em;
  color: red;
  margin: 0 0 0 23px
}

.card-author-name__like {
  transition: .3s all;
  stroke: red;
  fill: none;
}

.card-author-name__like:hover {
  fill: red;
  cursor: pointer;
  transform: translateY(-5px);
}

<div >
  <div >
    <div >
      <div >
        <div >
          <img  src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="Author img">
        </div>
        <div >
          <p >I am ipsum dolor sit amet, consectetur adipiscing elit. Ornare sit convallis risus sit elit. Rutrum arcu cursus aenean ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare sit convallis</p>
          <div >
            <div >
              <svg  width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V13C2 12.4696 2.21071 11.9609 2.58579 11.5858C2.96086 11.2107 3.46957 11 4 11H7M14 9V5C14 4.20435 13.6839 3.44129 13.1213 2.87868C12.5587 2.31607 11.7956 2 11 2L7 11V22H18.28C18.7623 22.0055 19.2304 21.8364 19.5979 21.524C19.9654 21.2116 20.2077 20.7769 20.28 20.3L21.66 11.3C21.7035 11.0134 21.6842 10.7207 21.6033 10.4423C21.5225 10.1638 21.3821 9.90629 21.1919 9.68751C21.0016 9.46873 20.7661 9.29393 20.5016 9.17522C20.2371 9.0565 19.9499 8.99672 19.66 9H14Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
              <h4 >Shahid Zaman</h4>
            </div>
            <span >Graphic Designer, Intelligent Project</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

To make the container follow the width of the content you can use max-content for it's max-width. To stretch the content to the available space you can use flex: 1; which is shorthand for flex: 1 1 0;. See the snippet below:

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 10px;
}

.container {
  max-width: max-content;
  margin: 0 auto;
  width: 100%;
  border: 2px solid red;
}

.row {
  display: flex;
}

.card {
  flex: 1;
  border: 2px solid green;
}

.card__row {
  align-items: flex-end;
}

.card__column--text {
  flex: 1;
}

.card__column--img {
  flex: 0 0 auto;
  padding-right: 125px;
}

.card__pos {
  font-size: 15px;
  line-height: 146.5%;
  letter-spacing: 0.02em;
  color: #818181;
}

.card__text {
  font-size: 28px;
  line-height: 134.5%;
  letter-spacing: 0.02em;
  color: #000;
  margin: 0 0 30px 0;
}

.card-author-name {
  display: flex;
  align-items: center
}

.card-author-name__text {
  font-size: 24px;
  line-height: 138.5%;
  letter-spacing: 0.02em;
  color: red;
  margin: 0 0 0 23px
}

.card-author-name__like {
  transition: .3s all;
  stroke: red;
  fill: none;
}

.card-author-name__like:hover {
  fill: red;
  cursor: pointer;
  transform: translateY(-5px);
}

<div >
  <div >
    <div >
      <div >
        <div >
          <img  src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="Author img">
        </div>
        <div >
          <p >I am ipsum dolor sit amet, consectetur adipiscing elit. Ornare sit convallis risus sit elit. Rutrum arcu cursus aenean ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare sit convallis</p>
          <div >
            <div >
              <svg  width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7 22H4C3.46957 22 2.96086 21.7893 2.58579 21.4142C2.21071 21.0391 2 20.5304 2 20V13C2 12.4696 2.21071 11.9609 2.58579 11.5858C2.96086 11.2107 3.46957 11 4 11H7M14 9V5C14 4.20435 13.6839 3.44129 13.1213 2.87868C12.5587 2.31607 11.7956 2 11 2L7 11V22H18.28C18.7623 22.0055 19.2304 21.8364 19.5979 21.524C19.9654 21.2116 20.2077 20.7769 20.28 20.3L21.66 11.3C21.7035 11.0134 21.6842 10.7207 21.6033 10.4423C21.5225 10.1638 21.3821 9.90629 21.1919 9.68751C21.0016 9.46873 20.7661 9.29393 20.5016 9.17522C20.2371 9.0565 19.9499 8.99672 19.66 9H14Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
              <h4 >Shahid Zaman</h4>
            </div>
            <span >Graphic Designer, Intelligent Project</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

You can learn more of the property flex here.

CodePudding user response：

It appears that the length of flex: 0 0 595px in card__column-text is factored into the layout before any flexibility properties (i.e., flex-grow and flex-shrink) are applied.

So what you're seeing is flex-basis: 595px and .card { flex-basis: auto } having no effect because it's too late to the party.