flex布局下overflow失效解決方案

這裡使用經典的兩欄布局

比如說我們想讓中間部分自適應並且超出長度出現滾動

dom結構簡單如下

class

="container"
>
class
="left"
>
div>
class
="content"
>
>
span
>
>
span
>
>
span
>
div>
class
="right"
>
div>
div>

這裡就直接使用less寫了

.container 

}

.container 

}

給需要滾動的dom外層再套一層div

讓外層的div設定overflow，不設定justify-content

這種方法也是在避免設定justify-content的這個屬性值

class

="container"
>
class
="left"
>
div>
class
="scroll"
>
// 新增div
class
="content"
>
>
span
>
>
span
>
>
span
>
div>
div>
class
="right"
>
div>
div>

.container 

// 定義滾動條軌道內陰影+圓角
&::-webkit-scrollbar-track
// 定義滑塊內陰影+圓角
&::-webkit-scrollbar-thumb
.content 
}}

:

:-webkit-scrollbar //滾動條整體部分
::-webkit-scrollbar-button //滾動條兩端的按鈕
::-webkit-scrollbar-track // 外層軌道
::-webkit-scrollbar-track-piece //內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-thumb //滾動條裡面可以拖動的那個
::-webkit-scrollbar-corner //邊角
::-webkit-resizer ///定義右下角拖動塊的樣式

關於彈性盒flex布局overflow無作用問題

flex彈性盒較為方便，可以節省我們很多布局時間，但是有時候可能會出現一點問題 布局 div div div div div div div css main box right box right main 經過層層的彈性盒自適應布局，最終我給了類名為scroll box的div內容超出滾動的樣式...

flex布局 Flex布局

摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...

布局（flex布局）

彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...