如何在不使用换行符的情况下使用flow grow和row wrap在一行中获得两个项目

Question

我花了几个小时试图弄清楚为什么当在页眉类的段落中的html中添加换行符时，两个div只会使用flex box停留在同一行上，或者因为必须定义宽度而设置宽度时，我想要的是纵向div设置宽度为300px，bio-to-size填充到剩余大小的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>