Thiết kế website giá rẻ

Question

How do I make my text stay within my div column with a scroll bar? I’m trying to make my right column have a scroll bar for the text inside it, but I am struggling to figure out how to do that.

I managed to get a horizontal scroll bar instead of a vertical one and then when I tried making it vertical it disappeared, and my text won’t confine itself to the column within in the div.

I’m quite new to this so sorry if this is obvious, I only started coding 2 days ago

<!doctype html>

Title

Three Unequal Columns
    <div class="row">
        <div class="column null" style="background-color: rgba(125, 77, 77, 0)">
            <p></p>
        </div>
        <div class="column left" style="background-color: #7d4d4d">
            <h2 class="section-one-title">Column 1</h2>
            <p>Some text..</p>
        </div>
        <div class="column null" style="background-color: rgba(125, 77, 77, 0)">
            <p></p>
        </div>
        <div class="column middle" style="background-color: #7d4d4d">
            <h2 class="section-two-title">Column 2</h2>
            <p>Tesing testing testing</p>
        </div>
        <div class="column null" style="background-color: rgba(125, 77, 77, 0)">
            <p></p>
        </div>
        <div class="column right" style="background-color: #7d4d4d">
            <h2 class="section-three-title">Column 3</h2>
            <div class="scroll"></div>
            <p>Some text..</p>
            <p class=left-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.

CSS:

.column {
float: left;
color: black;
padding: 5px;
min-width: 5px;
min-height: 500px;
max-height: 500px;
}

.left,.right {
color: black;
padding-left: 15px;
padding-right: 15px;
width: 20%;
}

.middle {
width: 45%;
color: black;
padding-left: 15px;
padding-right: 15px;
}

.section-one-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: deeppink;
}

.section-two-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: deeppink;
}

.section-three-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: deeppink;
}

.left-null {
size: 500px;
width: 5%;

}

.scroll {
overflow:scroll;
overflow-y: scroll;
overflow-x:hidden;

}

p {
font-family:helvetica;
}

.left-text {
color: pink;
overflow:auto
}

Danh mục

Three Unequal Columns