我想讓一個div占據所有可用空間，并在左上方放置一個div。 注意，B類必須采用剩余的形式以及所有可用的空間。

我試過用‘位置:相對’，但那不適合我，因為B類越過了A類，這是我不想要的。

我想要的:

我不想要的

只需嵌套元素并在內部元素上使用float: left

.wrapper{
  border: 2px solid green;
}

.inner {
  float: left;
  
  background: #EEE;
  border: 2px solid red;
  height: 150px;
  width: 50%;
  margin: 10px;
}

<div class="wrapper">
  <div class="inner">Inner</div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis lectus sed augue volutpat, ac placerat nisi eleifend. Nulla est erat, dignissim in elit vel, iaculis consectetur nulla. Donec vehicula, erat non efficitur fringilla, est leo ullamcorper tellus, vel suscipit libero ligula in felis. Praesent ac porttitor magna, sit amet aliquet leo. Vestibulum id libero libero. Ut finibus egestas dapibus. Donec at magna est. Donec posuere lacus aliquet est condimentum, eu hendrerit massa fermentum. Phasellus id velit metus. Vivamus quam erat, sollicitudin eu tortor eu, ornare condimentum arcu. Duis ornare, eros eu rutrum ullamcorper, nunc ante interdum velit, non suscipit dolor ante in ipsum. Ut id sodales nisl, at tincidunt ante. In venenatis ante eu faucibus cursus. Donec molestie placerat rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>Duis in risus faucibus arcu condimentum tempor. Suspendisse congue ut mi at dignissim. Nullam lectus tortor, placerat sit amet sem vel, lobortis euismod lacus. Nulla sapien sem, luctus ut metus molestie, posuere viverra tellus. Nulla vitae nunc eros. Donec at dolor odio. Nullam dolor justo, pellentesque eget orci vitae, iaculis rutrum enim. Quisque aliquam enim rhoncus rhoncus congue. Praesent pellentesque aliquet lectus vitae mattis. Nam viverra quis felis et porta. Integer dictum risus id mi rutrum vulputate. In sed nibh vel nisi ultrices finibus a in tortor.</p>

  <p>Maecenas faucibus quam ut suscipit sagittis. In imperdiet at nibh condimentum venenatis. Phasellus enim dolor, gravida eget tortor ac, pulvinar condimentum tortor. Nunc egestas ex suscipit tellus ultricies, sit amet tempus ipsum luctus. Maecenas malesuada fermentum metus ut hendrerit. Maecenas turpis purus, maximus ut dictum non, sollicitudin quis purus. Nam suscipit, mauris in vehicula ultricies, dui augue tempor purus, ac commodo velit neque a dolor. Aenean cursus eros ut lorem aliquet dapibus. Suspendisse luctus dolor ut gravida elementum. In mi magna, bibendum quis nibh non, porta vulputate magna. Cras risus eros, lacinia vel sodales sed, interdum eget turpis. Sed at est efficitur, tempus turpis eget, fringilla neque. Aenean vulputate ornare lacus. Maecenas tincidunt condimentum nulla. Donec justo ipsum, varius at est sed, bibendum feugiat ex.</p>

  <p>Cras molestie neque at justo convallis, vel lobortis tellus pretium. Vivamus eget vulputate quam. Vestibulum a ex orci. Integer leo felis, fringilla non turpis ut, venenatis lacinia nisi. Nam vel consequat felis. Mauris placerat turpis arcu, sit amet commodo libero placerat vel. Maecenas eget lacus commodo, convallis mauris sit amet, suscipit nibh. Proin dolor velit, porttitor eget sollicitudin non, lobortis nec risus. Pellentesque hendrerit, urna ut fermentum vulputate, diam nunc condimentum nisl, in varius magna ex nec est. Integer ut libero luctus, consequat orci at, feugiat nisi. Sed commodo tempus lorem ac rutrum. Sed vehicula felis nisi, ac aliquet ante vestibulum at. Curabitur accumsan nisi sed arcu suscipit bibendum. Fusce id sem et neque sagittis faucibus. Phasellus in ante porta, pulvinar massa non, gravida urna.</p>
</div>