在前端開發中，CSS是一種用于控制網頁布局和樣式的語言。其中，div元素是常用的塊級元素，通過CSS可以調整其寬度和高度。在一些特定的布局要求下，我們可能需要讓一個div自動適應剩余空間的寬度，同時使右邊的div變小。本文將以幾個案例來詳細解釋這個問題。

案例一：

假設我們有一個div容器，內部分為兩個子div。我們想讓左邊的子div自動適應剩余空間的寬度，而右邊的子div保持固定寬度。

<code>
<span><div class="container"></span>
<span><div class="left">Left Div</div></span>
<span><div class="right">Right Div</div></span>
<span></div></span>
</code>

針對這個需求，我們可以使用flex布局。給容器設置display屬性為flex，同時設置justify-content屬性為flex-end。

<code>
<span>.container {</span>
<span>  display: flex;</span>
<span>  justify-content: flex-end;</span>
<span>}</span>
<span>.left {</span>
<span>  flex-grow: 1;</span>
<span>}</span>
<span>.right {</span>
<span>  width: 100px;</span>
<span>}</span>
</code>

通過設置左邊子div的flex-grow屬性為1，可以使其自動占據剩余的空間。同時，右邊子div設置了固定的寬度為100px。

案例二：

如果我們需要讓右邊的div以百分比形式變小，可以使用calc()函數進行計算。

<code>
<span>.container {</span>
<span>  display: flex;</span>
<span>  justify-content: flex-end;</span>
<span>}</span>
<span>.left {</span>
<span>  flex-grow: 1;</span>
<span>}</span>
<span>.right {</span>
<span>  width: calc(100% - 100px);</span>
<span>}</span>
</code>

在上述代碼中，我們使用calc()函數計算右邊子div的寬度。其中，100%表示容器剩余的空間，減去100px表示右邊子div的固定寬度。

通過以上兩個案例，我們可以實現div自動寬度的效果，同時讓右邊的div變小。這種布局方法可以在實際開發中用于響應式設計，以適應不同設備和屏幕尺寸的要求。