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?

Previous: How does themeleaf determine that the array is empty?

Next: How does php grpc client set the timeout?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu