html - 在不使用换行符的情况下使用流增长和行换行时如何在一行中获得两个元素？

Question

我花了几个小时试图弄清楚为什么当在 header 类的段落中的 html 中添加换行符或设置宽度以便必须定义我想要的是时，为什么两个 div 只会使用 flex 框保持在同一行为纵向 div 设置 300px 的宽度和 bio 的大小以填充到剩余大小 avialble 。

CSS

.intro {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between; }

.bio {
  order: 1;
  flex-grow: 1; }

.bio p {
  width: 50%;
  margin: 0;
  padding: 0; }

.portrait {
  order: 2;
  width: 300px; }

.portrait img {
  width: 100%;
  border: 30px solid white; }

HTML

  <div class="intro">
      <div class="portrait">
        <img src="assets/img/me.jpg" alt="Nicola Sansom">
      </div>
      <div class="bio">
        <h1>Header</h1>
        <p>Content</p>
           <div class="well-versed">
           <b>1 Col</b>
           </div>
      </div>
  </div>

Answer 1

这是你想要的吗？我想我 100% 不理解你的问题

.intro {
  display: flex;
  /*flex-flow: row wrap;*/
  align-items: center;
 /* justify-content: space-between;*/ }

.bio {
  width:100%;
  background-color:pink;
  order: 1;
  /*flex-grow: 1; */}

.bio p {
  width: 50%;
  margin: 0;
  padding: 0; }

.portrait {
 order: 2;
  width: 300px; }

.portrait img {
  width: 100%;
  border: 30px solid white; }

 <div class="intro">
      <div class="portrait">
        <img src="assets/img/me.jpg" alt="Nicola Sansom">
      </div>
      <div class="bio">
        <h1>Header</h1>
        <p>Content</p>
           <div class="well-versed">
           <b>1 Col</b>
           </div>
      </div>
  </div>