有一個可調整大小的div，用於在px和max-width爲100％的情況下給定寬度

我在另一個div中有一個div。外部div有一個給定的寬度，但最大寬度應該是100％。內部div可調整大小，但不知何故外部div似乎不關心內部div是否變寬。顯示一個滾動條，而不是使用內框大小最大爲100％。有一個可調整大小的div，用於在px和max-width爲100％的情況下給定寬度

這個小提琴演示了這個問題;我如何可以在px中使用給定寬度的div，將內部div設置爲可調整大小，並讓外部div監聽內部div的當前寬度和大小，最大爲100％？

JSFiddle with the example

HTML

<div id="outer"> 
    <div id="inner">resize me...</div> 
</div>

CSS

#outer { 
    overflow: auto; 
    width: 200px; 
    min-width: 200px; 
    max-width: 100%; 
    min-height: 100px; 
    background: #ededed; 
    border: 1px solid #f90; 
} 

#inner { 
    overflow: auto; 
    background: #ccc; 
    border: 1px solid #999; 
    padding: 15px; 
    resize: both;}

來源

2015-10-21 Ben

添加下面的CSS（或更換）：

#outer { 
    display: inline-block; 
    width: auto; 
} 

#inner { 
    width: 200px; 
}

實時預覽：JSFiddle

來源

2015-10-21 07:30:57 KittMedia

簡單和偉大。奇蹟般有效！謝謝+1，並被接受。 – Ben

您應該移除「width：200px;」並添加「float：left;」以「#outer」

下面是代碼：

#outer { 
overflow: auto; 
min-width: 200px; 
max-width: 100%; 
min-height: 100px; 
background: #ededed; 
border: 1px solid #f90; 
float: left; 
}

來源

2015-10-21 07:31:07

感謝您的回覆。你的解決方案几乎可以工作，必須將寬度添加到內部div才能使其工作。我選擇了其他答案，因爲沒有漂浮需要，我更喜歡這個。爲你的努力+1。 – Ben

看看是否有所幫助。

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#outer { 
 
    /* min-width: 200px;*/ 
 
    /* max-width: 100%; */ 
 
    min-height: 100px; 
 
    background: #ededed; 
 
    border: 1px solid #f90; 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 
#inner { 
 
    overflow: auto; 
 
    background: #ccc; 
 
    border: 1px solid #999; 
 
    padding: 15px; 
 
    max-width: 100%; 
 
    resize: both; 
 
}

<div id="outer"> 
 
    <div id="inner">resize me...</div> 
 
</div>

來源

2015-10-21 07:41:57 imGaurav

感謝您的回覆。外部div仍然需要100％的最大寬度（否則人們可以在瀏覽器寬度之外調整它的大小）。爲你的努力+1。已接受的答案已被選中。 – Ben

有一個可調整大小的div，用於在px和max-width爲100％的情況下給定寬度

回答

相關問題