如何使 flex 元素成为其内容的宽度？

Question

红线是容器的最大宽度，绿线是flex元素（.card类）的宽度。

我设置类：

.card flex: 0 0 auto;

结果我得到了不明确的宽度 + 走出容器（顺便说一句，这很奇怪，我没想到会得到这个）。如果我将 .card 类设置为

flex: 0 1 auto;

元素伸展到容器的整个宽度。但我需要 flex 元素等于其内容的宽度，而不是将其拉伸到容器的整个宽度。

为什么 flex-element 的行为如此奇怪？如何使 flex-element 具有其内容的宽度？

* {
  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 class="container">
  <div class="row">
    <div class="card">
      <div class="card__row row">
        <div class="card__column card__column--img">
          <img class="card__img" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="Author img">
        </div>
        <div class="card__column card__column--text">
          <p class="card__text">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 class="card__author card-author">
            <div class="card-author__name card-author-name">
              <svg class="card-author-name__like" 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 class="card-author-name__text">Shahid Zaman</h4>
            </div>
            <span class="card__pos">Graphic Designer, Intelligent Project</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

要使容器跟随内容的宽度，您可以使用max-content，因为它是max-width。要将内容拉伸到可用空间，您可以使用flex: 1;，它是flex: 1 1 0; 的简写。请参阅下面的 sn-p：

* {
  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 class="container">
  <div class="row">
    <div class="card">
      <div class="card__row row">
        <div class="card__column card__column--img">
          <img class="card__img" src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="Author img">
        </div>
        <div class="card__column card__column--text">
          <p class="card__text">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 class="card__author card-author">
            <div class="card-author__name card-author-name">
              <svg class="card-author-name__like" 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 class="card-author-name__text">Shahid Zaman</h4>
            </div>
            <span class="card__pos">Graphic Designer, Intelligent Project</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

您可以了解更多flexhere的属性。

Answer 2

似乎card__column-text 中的flex: 0 0 595px 的长度在任何灵活性属性（即flex-grow 和flex-shrink）被应用之前被考虑到布局中。

所以你看到的是 flex-basis: 595px 和 .card { flex-basis: auto } 没有效果，因为聚会太晚了。