#con {
height: 400px;
width: 300px;
border: solid 1px red;
display: flex;
flex-wrap: wrap;
align-content: stretch;
}

#one {
border: solid 1px green;
flex-grow: 1;
}

#two {
border: solid 1px magenta;
width: 40px;
}

#tre {
width: 100%;
height: 50px;
border: solid 1px blue;
}

<div id="con">
<div id="one">1</div>
<div id="two">2</div>
<div id="tre">3</div>
</div>

請(qǐng)將類(lèi)用于樣式而不是id。如果你不局限于只使用flexbox，我會(huì)使用grid(如果你必須只有3個(gè)div的話)

#con {
        height: 400px;
        width: 300px;
        border: solid 1px red;
        /* display: flex;
        flex-wrap: wrap;
        align-content: stretch; */
        display: grid; /* added */
        grid-template-columns: auto 40px; /* added */
        grid-template-rows: auto 50px; /* added */
      }

      #one {
        border: solid 1px green;
        /* flex-grow: 1; */
      }

      #two {
        border: solid 1px magenta;
        /* width: 40px; */
      }

      #tre {
        /* width: 100%;
        height: 50px; */
        border: solid 1px blue;
        grid-column: 1 / 3; /* added */
      }

<div id="con">
      <div id="one">1</div>
      <div id="two">2</div>
      <div id="tre">3</div>
    </div>

只是改變一下這個(gè):

#two {
border: solid 1px magenta;
width: 40px;
}

作者:

#two {
border: solid 1px magenta;
width: 50px;
}

謝謝