If the child element extends the parent element, how can the other child element be highly adaptive?

clipboard.png
as expected in the figure, child element 2 extends the parent element, but child element 1 cannot be highly adaptive and has always been 0. How can I set child element 1 to be as high as child element 2? It is better to use pure css method

father{
  width:680rpx;
  display:flex;
  align-items: center;  
}
son2{
    display:inline-block;
    width:60%;
    margin:..;
    padding:..;//
}
son1{
    width:40%;
    height:100%;//0
    display:inline-block;
}
Css
Nov.14,2021

    .father {
      width: 680px;
      display: flex;
      align-items: stretch;
    }

    .son2 {
      width: 60%;
      height: 100px;
      /*margin:..;*/
      /*padding:..;*/
    }

    .son1 {
     width: 40%;
    }

http://jsfiddle.net/yqd74wxs want this effect?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3bce5-2c2bc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3bce5-2c2bc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?