2 Boxen nebeneinander, wobei sich Box 1 in der Breite automatisch an der Breite der 2. Box orientieren soll

[ebody]

Hallo,

https://jsfiddle.net/s9gjwu9u/8/

box2 hat eine Breite von 25%, #box1 sollte jetzt automatisch den Rest der Fläche ausfüllen und müsste eine Breite von 75% haben. Hätte #box2 eine Breite von 30%, müsste #box1 eine Breite von 30% haben usw.

Mit width: auto funktioniert es nicht. #box1 wird mit einer viel zu geringen Breite dargestellt. Wie passt sich #box1 in der Breite immer orientiert an der Breite von #box2 an?

<div id="screen">
  <div id="box1">Box1</div>
  <div id="box2">Box2</div>
</div>

	#screen {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
  
  #box1 {
		float:left;
		width: auto;
		height: 100%;
    background-color: blue;
	}
  
  #box2 {
		float:left;
		width: 25%;
		height: 100%;
    background-color: green;
	}

Gruß ebody