如何讓box1在排除box2后充滿剩余空間？ 或者： box1如何充滿剩余空間，且排除box2占據的區域？

如何讓box1排除box2后充滿剩余空間？

本文將探討如何實現一個布局效果：box1元素占據剩余空間，排除box2元素占據的區域后，仍然充滿父容器。 問題中給出的初始代碼使用inline-block導致box1和box2垂直排列，而非期望的水平排列并box1占據剩余空間。 為了達到預期效果，我們需要調整布局方式。

文中提供了兩種解決方案：

方案一：使用calc()函數

該方案保留了原始代碼中display: inline-block的設置，通過css的calc()函數計算box1的寬度。calc()函數允許我們進行簡單的數學運算，這里我們用父容器寬度減去box2的寬度(200px)來計算box1的寬度。 代碼如下：

#box1 {   width: calc(100% - 200px); }

需要注意的是，這種方法需要預先知道box2的寬度，如果box2的寬度是動態變化的，則需要根據實際情況動態調整calc()中的數值。

方案二：使用flex布局

該方案利用flex布局來實現更靈活的布局控制。通過設置父容器#content為Flex容器，并使用flex: 1為box1分配剩余空間。同時，flex-shrink: 0防止box2被壓縮。代碼如下：

#content {   display: flex;   flex-direction: row; }  #box1 {   flex: 1; }  #box2 {   flex-shrink: 0;   width: 200px; }

Flex布局提供了更強大的布局能力，可以更方便地處理不同尺寸的元素和響應式布局的需求。 相對方案一，方案二更加靈活，也更易于維護。