與從flexbox內溢出的文本苦苦掙扎

我試圖用3個步驟製作一個簡單的說明頁面，並附有示例代碼塊和簡短說明。如果你去codepen here，你會看到我在說什麼（我也轉載了下面的代碼）。與從flexbox內溢出的文本苦苦掙扎

有3個步驟，每個步驟的HTML/CSS結構都是相同的。但是，其中的一些內容可能會有所不同。如果你看代碼筆，你會發現第一步和第三步看起來相對不錯。但由於某種原因，代碼塊會延伸到不同的寬度。

這是第一個問題。我如何得到這樣的代碼塊（即<div class="code">）的所有三個步驟的長度相等？

第二個問題是，即使我設置了overflow-x: scroll和width: 100%，步驟2的代碼塊溢出了它的幾個父區段之外。理想情況下，我希望代碼塊的寬度與其他兩個寬度相同，同時允許內部代碼左右滾動。

這是問題二。如何限制flexbox中的div，使其不會溢出父級以外，同時可以允許在其直接父級div內滾動？

我希望我的解釋足夠。我很難形容這一點，因爲我還不太熟悉Flexbox的怪癖。請看看codepen，我確信它會變得更清晰。

提前致謝，請讓我知道我還需要澄清什麼。

HTML：

<div class="container"> 
    <div class="step"> 
    <div class="number">1</div> 
    <div class="step-body"> 
     <div class="description">This is a description of the terminal code block below:</div> 
     <div class="code"><pre>npm install foo bar</pre></div> 
    </div> 
    </div> 
    <div class="step"> 
    <div class="number">2</div> 
    <div class="step-body"> 
     <div class="description">This is a description of the very very very long single-line code block below:</div> 
     <div class="code"><pre>foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</pre></div> 
    </div> 
    </div> 
    <div class="step"> 
    <div class="number">3</div> 
    <div class="step-body"> 
     <div class="description">This is a description of the JSON code block below:</div> 
     <div class="code"><pre>{ 
    "custom": { 
    "key": "a1b2c3d4e5f6" 
    } 
}</pre></div> 
    </div> 
    </div> 
</div>

CSS：

body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

.container { 
    max-width: 50%; 
} 

.step { 
    display: flex; 
    border: 1px solid red; 
} 

.number { 
    font-size: 2.5rem; 
    text-align: right; 
    flex-shrink: 0; 
    margin-right: 1rem; 
    width: 3rem; 
} 

.step-body { 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
} 

.code { 
    background-color: black; 
    color: white; 
    width: 100%; 
    padding: 12px; 
    overflow-x: scroll; 
}

來源

2016-07-07 adrianmc

確實e.g'溢出：滾動;寬度：400px;'爲你工作？在.code類中。這是你想要的嗎？ – Apostolos

@Apostolos我很欣賞這種迴應，但這對我無效，因爲我無法硬化寬度。我認爲flexbox的重點是我可以有流體佈局（不需要手動計算）。不幸的是，這是行不通的。 – adrianmc

所以通過定義百分比的寬度，這三個塊如何相等？我的意思是，這真的可以實現嗎？這很奇怪 – Apostolos

編輯：這裏是一個更好的解決方案，然後我的第一個答案

從.code刪除width: 100%並添加width: calc(100% - 4rem);到.step-body看到小提琴https://jsfiddle.net/0kqx79g9/9/

body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

.container { 
    max-width: 50%; 
} 

.step { 
    display: flex; 
    border: 1px solid red; 
} 

.number { 
    font-size: 2.5rem; 
    text-align: right; 
    flex-shrink: 0; 
    margin-right: 1rem; 
    width: 3rem; 
} 

.step-body { 
    width: calc(100% - 4rem); 
    padding-top: 1rem; 
    padding-bottom: 1rem; 
} 

.code { 
    background-color: black; 
    color: white; 
    padding: 12px; 
    overflow-x: scroll; 
}

來源

2016-07-07 20:31:17

我調整了您提供的代碼，希望能夠解決您遇到的問題。

body { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
    } 

    .container { 
     max-width: 50%; 
     -webkit-flex-direction: column; 
     flex-direction: column; 
    } 

    .step { 
     border: 1px solid red; 
     -webkit-flex-direction: column; 
     flex-direction: column; 
     padding:5%; 
    } 

    .number { 
     font-size: 2.5rem; 
     text-align: right; 
     flex-shrink: 0; 
     margin-right: 1rem; 
     width: 3rem; 
    } 

    .step-body { 
     width:inherit; 
     padding-top: 1rem; 
     padding-bottom: 1rem; 
    } 

    .code { 
     background-color: black; 
     color: white; 
     width: 100%; 
     /* padding: 12px; */ 
     overflow-x: scroll; 
    }

這裏是例子： https://jsfiddle.net/ax0mfc0p/

你可以從這裏找到柔性盒的一些詳細信息： https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

來源

2016-07-07 20:31:55 Cnolimit

與從flexbox內溢出的文本苦苦掙扎

回答

相關問題