Related
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 12 months ago.
I'm trying to get the cyan box to scroll horizontally instead of triggering a horizontal scrollbar on the page.
It seems to break when I try using a grid layout; I had to horizontally scrolling before when I didn't use a grid.
How can I fix this? .page-wrap should fill the whole window and add vertical scrollbar as needed. Only the .boxs should scroll horizontally.
html {
overflow: hidden;
}
.page-wrap {
display: grid;
grid-template-areas:
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 60px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
}
.sidebar {
background-color: green;
grid-area: sidebar;
}
.footer {
background-color: red;
grid-area: footer;
}
.main {
background-color: yellow;
grid-area: main;
}
.box {
background-color: cyan;
margin: 10px;
overflow-x: scroll;
}
<div class="page-wrap">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="box">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, modi laudantium facilis. Cum quasi dolore quam doloribus reprehenderit illum nostrum id quas ea. Nostrum adipisci dolor nulla veniam exercitationem ipsa.</td>
<td>Accusamus deserunt voluptatibus rem, aspernatur enim dolores, amet illum accusantium! Tempora, repellendus, fuga. Ex, consectetur mollitia reprehenderit qui, consequuntur ipsam maiores excepturi sapiente tempore odit repudiandae facere incidunt! Vero, beatae.</td>
<td>Et minus eaque corrupti voluptas, earum ex non similique. Officiis a dignissimos veritatis quas provident sunt? Fuga vel officia qui, numquam eos sint, totam aspernatur, commodi quis, temporibus animi excepturi!</td>
<td>Natus quaerat, sint nemo quia laudantium dolorem asperiores deserunt neque porro esse iusto reprehenderit et assumenda ipsum saepe consequuntur soluta officiis illum maiores cumque quos voluptate expedita tenetur eum autem!</td>
<td>Asperiores ducimus accusantium aliquid nemo aliquam fugiat culpa maxime repudiandae pariatur minus. Eum incidunt iste molestias officiis sunt nostrum facilis velit. Reprehenderit quis aut officia quas beatae assumenda esse asperiores.</td>
<td>Architecto, nam consequuntur odit distinctio! Suscipit fuga nam reprehenderit, nostrum modi provident iusto aperiam alias qui. Optio repudiandae reiciendis, omnis esse maiores! A blanditiis ducimus voluptate nobis exercitationem. Temporibus, vel!</td>
<td>Similique et est omnis fuga, ad earum sapiente. Nam qui est quidem. Dignissimos amet harum voluptate a, sint culpa autem et neque, natus quod cum eos laudantium molestias, dolorem optio.</td>
<td>Saepe aspernatur consequuntur sint nisi dolores nihil ab repudiandae, odio dolor, assumenda culpa corporis fugiat ullam officia quibusdam eaque enim, harum voluptatem eveniet reprehenderit natus consectetur deleniti nesciunt et! Omnis!</td>
<td>Nihil quas quod numquam ut fugiat doloremque repudiandae animi iusto. Ullam quidem ipsa dolorem quos veritatis adipisci quisquam obcaecati culpa et consequatur, aspernatur unde eligendi rerum labore ab odit asperiores.</td>
<td>Hic, aliquam, harum? Harum tempora accusantium animi ratione id perspiciatis quasi maiores iste odio quisquam, adipisci, laudantium cupiditate voluptatem mollitia soluta sunt eveniet facere quibusdam aspernatur? Suscipit obcaecati dolorum eligendi.</td>
<td>Possimus natus, dignissimos vero nesciunt cum voluptatibus reiciendis commodi maxime voluptates qui illo quia distinctio tempora perferendis fugit modi itaque, quis recusandae quisquam quos ullam alias! Voluptatum repellat mollitia incidunt.</td>
<td>Quod in ducimus, saepe obcaecati, eius vero ipsa ea cum reprehenderit velit sunt numquam eaque sapiente dolorem, possimus id nostrum natus eligendi accusamus nulla voluptatibus necessitatibus harum vitae. Dolorum, praesentium.</td>
<td>Ab iusto, dicta deleniti explicabo perspiciatis pariatur deserunt blanditiis vel accusantium. Tempore architecto fugit cum similique laudantium et veritatis id, quos deleniti eaque voluptatum laboriosam, natus commodi itaque veniam vel.</td>
<td>Dignissimos, quis excepturi, ratione nemo minima tenetur possimus. Quos eum placeat veniam voluptas, tempora, aliquam? Dolores ipsum obcaecati nisi itaque dolor, officiis quidem minima, nesciunt molestias facilis cupiditate repellat sequi.</td>
<td>Dolores asperiores quidem totam illo veniam! Natus architecto nulla et asperiores modi quaerat, sed! Quam cum rem voluptatibus, rerum pariatur deserunt fugit odit, totam blanditiis animi nulla nisi facilis saepe.</td>
<td>Quibusdam dolor explicabo soluta adipisci est quis aliquam tempora non, sint laudantium tempore minima inventore dolorum magni ad a rem magnam dignissimos expedita maxime numquam voluptas facere, quidem harum aliquid.</td>
<td>Facere dolorem, ullam quasi. Numquam alias maiores harum voluptate delectus quos totam architecto voluptatum, sapiente pariatur modi, autem culpa omnis facere commodi unde assumenda. Quaerat, rem deserunt. Beatae, voluptates, cum.</td>
<td>Magni pariatur eos quo perspiciatis ipsam a modi accusantium nulla fugiat officiis dolor ducimus hic, provident eius facilis quibusdam molestiae quasi, sunt, quis repellat nesciunt! Enim ipsum ducimus cumque placeat?</td>
<td>Recusandae porro, consectetur placeat, temporibus delectus nesciunt aliquid nam incidunt at ipsa accusantium hic maxime tempora dolorum! Totam reiciendis, consequatur deserunt eveniet natus, vitae ipsa voluptate repudiandae velit, quia aspernatur!</td>
<td>Et iusto ab repellat quae? Quas, ratione sapiente a, fuga voluptates, unde ullam dolores, fugit sint magnam perferendis ad quae. Magnam consequatur nisi quisquam, maiores quasi qui provident similique nobis.</td>
<td>Ab qui hic, incidunt consequuntur officia exercitationem laboriosam suscipit veritatis est deleniti, debitis reiciendis at quidem consequatur iure ut quisquam tempore delectus aut soluta sequi tenetur sed magnam nostrum. Ab?</td>
<td>Earum quis perspiciatis perferendis, rem, fugit cumque reiciendis! Porro consequatur quam consequuntur quaerat, atque praesentium adipisci fugit, dignissimos, ab labore reprehenderit provident temporibus, totam magnam illum pariatur deserunt alias cum!</td>
<td>Officiis sit quam vero nobis doloribus necessitatibus possimus. Veniam, totam! Illo magnam, ipsum consequuntur at, ipsam sit fuga rerum architecto eum libero officiis, nobis! Obcaecati incidunt, mollitia placeat eaque atque.</td>
<td>Nisi nam assumenda laudantium quos non quasi. Fuga enim, voluptatibus possimus tempora numquam dolores maiores, eum quaerat sit odit distinctio saepe optio aut accusamus explicabo, dolorem quidem consequatur. Maxime, similique!</td>
<td>Autem inventore expedita quibusdam ipsum. Consequuntur nulla in vero blanditiis deleniti dignissimos, earum eligendi voluptatibus, minus illo, perspiciatis doloremque nisi sed maiores tempora. Excepturi minima, officia incidunt vitae pariatur illo!</td>
<td>Sequi delectus dolorum, ea rem quis voluptatem accusantium quibusdam suscipit corrupti est laborum adipisci tenetur optio expedita inventore quam molestiae cupiditate totam. Rem sed, odit blanditiis eius quia vel eos.</td>
<td>Vero dolor nam quisquam reiciendis quibusdam id sapiente quia est veritatis facilis, expedita recusandae sequi iste tempora harum illum nihil. Amet laborum, accusamus soluta dolores et iure? Possimus, et? Iusto.</td>
<td>Ullam ipsum blanditiis obcaecati, rem aliquam voluptates fuga quo praesentium quia cum dignissimos debitis laboriosam itaque? Nostrum explicabo quae, rem praesentium accusantium dicta officia veritatis magni earum officiis. Inventore, ut.</td>
<td>Quisquam, ex, dolore. Voluptates porro eum, blanditiis ullam non sequi suscipit iste eius! Soluta, nam quia impedit veritatis laudantium id ea iure autem magnam sapiente, a modi omnis. Optio, animi!</td>
<td>Consequuntur amet, tenetur quidem consequatur doloremque distinctio ipsum minima, incidunt, fuga voluptatibus placeat quae autem recusandae quasi. Nihil, dolorum? Aliquid eligendi hic expedita saepe recusandae suscipit tempora tempore illum tenetur.</td>
</tr>
</table>
</div>
</div>
<div class="footer">footer</div>
</div>
Figured it out.
html {
overflow: hidden;
}
.page-wrap {
display: grid;
grid-template-areas:
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 60px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
overflow-x: auto;
}
.sidebar {
background-color: lime;
grid-area: sidebar;
}
.footer {
background-color: orange;
grid-area: footer;
}
.main {
background-color: yellow;
grid-area: main;
min-width: 0;
}
.box {
background-color: cyan;
margin: 10px;
overflow-x: scroll;
max-width: 100%;
}
<div class="page-wrap">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="box">
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, modi laudantium facilis. Cum quasi dolore quam doloribus reprehenderit illum nostrum id quas ea. Nostrum adipisci dolor nulla veniam exercitationem ipsa.</td>
<td>Accusamus deserunt voluptatibus rem, aspernatur enim dolores, amet illum accusantium! Tempora, repellendus, fuga. Ex, consectetur mollitia reprehenderit qui, consequuntur ipsam maiores excepturi sapiente tempore odit repudiandae facere incidunt! Vero, beatae.</td>
<td>Et minus eaque corrupti voluptas, earum ex non similique. Officiis a dignissimos veritatis quas provident sunt? Fuga vel officia qui, numquam eos sint, totam aspernatur, commodi quis, temporibus animi excepturi!</td>
<td>Natus quaerat, sint nemo quia laudantium dolorem asperiores deserunt neque porro esse iusto reprehenderit et assumenda ipsum saepe consequuntur soluta officiis illum maiores cumque quos voluptate expedita tenetur eum autem!</td>
<td>Asperiores ducimus accusantium aliquid nemo aliquam fugiat culpa maxime repudiandae pariatur minus. Eum incidunt iste molestias officiis sunt nostrum facilis velit. Reprehenderit quis aut officia quas beatae assumenda esse asperiores.</td>
<td>Architecto, nam consequuntur odit distinctio! Suscipit fuga nam reprehenderit, nostrum modi provident iusto aperiam alias qui. Optio repudiandae reiciendis, omnis esse maiores! A blanditiis ducimus voluptate nobis exercitationem. Temporibus, vel!</td>
<td>Similique et est omnis fuga, ad earum sapiente. Nam qui est quidem. Dignissimos amet harum voluptate a, sint culpa autem et neque, natus quod cum eos laudantium molestias, dolorem optio.</td>
<td>Saepe aspernatur consequuntur sint nisi dolores nihil ab repudiandae, odio dolor, assumenda culpa corporis fugiat ullam officia quibusdam eaque enim, harum voluptatem eveniet reprehenderit natus consectetur deleniti nesciunt et! Omnis!</td>
<td>Nihil quas quod numquam ut fugiat doloremque repudiandae animi iusto. Ullam quidem ipsa dolorem quos veritatis adipisci quisquam obcaecati culpa et consequatur, aspernatur unde eligendi rerum labore ab odit asperiores.</td>
<td>Hic, aliquam, harum? Harum tempora accusantium animi ratione id perspiciatis quasi maiores iste odio quisquam, adipisci, laudantium cupiditate voluptatem mollitia soluta sunt eveniet facere quibusdam aspernatur? Suscipit obcaecati dolorum eligendi.</td>
<td>Possimus natus, dignissimos vero nesciunt cum voluptatibus reiciendis commodi maxime voluptates qui illo quia distinctio tempora perferendis fugit modi itaque, quis recusandae quisquam quos ullam alias! Voluptatum repellat mollitia incidunt.</td>
<td>Quod in ducimus, saepe obcaecati, eius vero ipsa ea cum reprehenderit velit sunt numquam eaque sapiente dolorem, possimus id nostrum natus eligendi accusamus nulla voluptatibus necessitatibus harum vitae. Dolorum, praesentium.</td>
<td>Ab iusto, dicta deleniti explicabo perspiciatis pariatur deserunt blanditiis vel accusantium. Tempore architecto fugit cum similique laudantium et veritatis id, quos deleniti eaque voluptatum laboriosam, natus commodi itaque veniam vel.</td>
<td>Dignissimos, quis excepturi, ratione nemo minima tenetur possimus. Quos eum placeat veniam voluptas, tempora, aliquam? Dolores ipsum obcaecati nisi itaque dolor, officiis quidem minima, nesciunt molestias facilis cupiditate repellat sequi.</td>
<td>Dolores asperiores quidem totam illo veniam! Natus architecto nulla et asperiores modi quaerat, sed! Quam cum rem voluptatibus, rerum pariatur deserunt fugit odit, totam blanditiis animi nulla nisi facilis saepe.</td>
<td>Quibusdam dolor explicabo soluta adipisci est quis aliquam tempora non, sint laudantium tempore minima inventore dolorum magni ad a rem magnam dignissimos expedita maxime numquam voluptas facere, quidem harum aliquid.</td>
<td>Facere dolorem, ullam quasi. Numquam alias maiores harum voluptate delectus quos totam architecto voluptatum, sapiente pariatur modi, autem culpa omnis facere commodi unde assumenda. Quaerat, rem deserunt. Beatae, voluptates, cum.</td>
<td>Magni pariatur eos quo perspiciatis ipsam a modi accusantium nulla fugiat officiis dolor ducimus hic, provident eius facilis quibusdam molestiae quasi, sunt, quis repellat nesciunt! Enim ipsum ducimus cumque placeat?</td>
<td>Recusandae porro, consectetur placeat, temporibus delectus nesciunt aliquid nam incidunt at ipsa accusantium hic maxime tempora dolorum! Totam reiciendis, consequatur deserunt eveniet natus, vitae ipsa voluptate repudiandae velit, quia aspernatur!</td>
<td>Et iusto ab repellat quae? Quas, ratione sapiente a, fuga voluptates, unde ullam dolores, fugit sint magnam perferendis ad quae. Magnam consequatur nisi quisquam, maiores quasi qui provident similique nobis.</td>
<td>Ab qui hic, incidunt consequuntur officia exercitationem laboriosam suscipit veritatis est deleniti, debitis reiciendis at quidem consequatur iure ut quisquam tempore delectus aut soluta sequi tenetur sed magnam nostrum. Ab?</td>
<td>Earum quis perspiciatis perferendis, rem, fugit cumque reiciendis! Porro consequatur quam consequuntur quaerat, atque praesentium adipisci fugit, dignissimos, ab labore reprehenderit provident temporibus, totam magnam illum pariatur deserunt alias cum!</td>
<td>Officiis sit quam vero nobis doloribus necessitatibus possimus. Veniam, totam! Illo magnam, ipsum consequuntur at, ipsam sit fuga rerum architecto eum libero officiis, nobis! Obcaecati incidunt, mollitia placeat eaque atque.</td>
<td>Nisi nam assumenda laudantium quos non quasi. Fuga enim, voluptatibus possimus tempora numquam dolores maiores, eum quaerat sit odit distinctio saepe optio aut accusamus explicabo, dolorem quidem consequatur. Maxime, similique!</td>
<td>Autem inventore expedita quibusdam ipsum. Consequuntur nulla in vero blanditiis deleniti dignissimos, earum eligendi voluptatibus, minus illo, perspiciatis doloremque nisi sed maiores tempora. Excepturi minima, officia incidunt vitae pariatur illo!</td>
<td>Sequi delectus dolorum, ea rem quis voluptatem accusantium quibusdam suscipit corrupti est laborum adipisci tenetur optio expedita inventore quam molestiae cupiditate totam. Rem sed, odit blanditiis eius quia vel eos.</td>
<td>Vero dolor nam quisquam reiciendis quibusdam id sapiente quia est veritatis facilis, expedita recusandae sequi iste tempora harum illum nihil. Amet laborum, accusamus soluta dolores et iure? Possimus, et? Iusto.</td>
<td>Ullam ipsum blanditiis obcaecati, rem aliquam voluptates fuga quo praesentium quia cum dignissimos debitis laboriosam itaque? Nostrum explicabo quae, rem praesentium accusantium dicta officia veritatis magni earum officiis. Inventore, ut.</td>
<td>Quisquam, ex, dolore. Voluptates porro eum, blanditiis ullam non sequi suscipit iste eius! Soluta, nam quia impedit veritatis laudantium id ea iure autem magnam sapiente, a modi omnis. Optio, animi!</td>
<td>Consequuntur amet, tenetur quidem consequatur doloremque distinctio ipsum minima, incidunt, fuga voluptatibus placeat quae autem recusandae quasi. Nihil, dolorum? Aliquid eligendi hic expedita saepe recusandae suscipit tempora tempore illum tenetur.</td>
</tr>
</table>
</div>
</div>
<div class="footer">footer</div>
</div>
I remembered an annoying quirk with flexbox, thought it might apply to grid too.
The trick is to add min-width: 0 to .main.
So im currently trying to use React Bootstrap for my website. I'm confused how to make only one div to be scrollable and the others not. Here's my code in App.js
import * as React from 'react'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
function App() {
return (
<Container fluid>
<Row style={{height: "100vh"}}>
<Col sm={4} className="border border-primary">
<div>Avatar</div>
</Col>
<Col className="border border-primary">
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
<div className="position-sticky">
stick please
</div>
</Col>
</Row>
</Container>
);
}
export default App
In the image, the <div>please stick</div> is not seen because it's far below and the <Col>avatar</Col> is scrollable when I wanted to make the text Avatar to stick.
Does anyone know how to make one div scroll independently while the other divs stays and cannot be scrolled? Thanks in advance
Give the scrollable div overflow-y: auto. One child of a container won't scroll until you give the height to its parent. In the following example, I've given height: 100%, because I want to divide the page into 2 parts which will take full height i.e (100vh). You can also give custom height i.e height: 300px;
Just add height on parent cotainer and overflow-y: auto to child element that you want to scroll.
body,
html {
height: 100%;
margin: 0;
}
div.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
div.first {
background-color: burlywood;
padding: 1rem;
}
div.second {
background-color: darkcyan;
padding: 1rem;
overflow-y: auto;
}
<div class="container">
<div class="first">
first
</div>
<div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam nulla quae accusantium sunt provident saepe, quis fugit delectus? Possimus sed id dolore omnis facere harum vitae dolor reprehenderit. Tenetur. Ipsa quasi rem deleniti quidem ut corporis
s officia minima est labore dignissimos quia exercitationem unde! Libero deleniti in laudantium harum nihil reiciendis autem dolorum vero, non blanditiis sapiente quibusdam tenetur animi, dicta laboriosam quisquam sint repellat natus eius nostrum
reprehenderit. Veniam recusandae quod quaerat quis. Cumque eum ducimus, at deserunt nemo minus neque similique dolores rerum voluptas, necessitatibus quis aperiam consequuntur, error quo accusamus. Cum doloremque ut deserunt. Cupiditate, possimus
delectus. Dignissimos minima perspiciatis fugiat. Minima quaerat laborum veniam reprehenderit, ea reiciendis expedita explicabo nemo, recusandae harum, dolores vitae tenetur dolore itaque ducimus odit deserunt pariatur dolor facere molestiae unde
quos et. Ut, consectetur neque! Debitis dicta doloremque eaque ex aspernatur odit saepe omnis dignissimos veritatis ut. Earum dolores mollitia dolorem eligendi ad molestiae, saepe exercitationem harum magni doloribus, natus minima ratione aliquam
laudantium expedita! Nam odit harum consequuntur eaque quas, magni atque tenetur veniam dolor ipsum fuga sapiente vero molestias at consectetur ratione! Ex obcaecati nihil sed eum dicta impedit asperiores dolorum reiciendis vitae! Velit, qui esse
quos eveniet voluptas quia ipsum minus asperiores. Quas, deserunt hic nihil quam eligendi, voluptatem dolores ducimus nesciunt enim saepe officia eos quia blanditiis esse neque omnis aliquam! Ab quod harum maxime illum quam commodi cupiditate eaque,
esse vero nostrum, deleniti ut eum recusandae. Quos asperiores distinctio a debitis? Expedita illum minus modi facere reprehenderit animi, voluptate ipsum? Quis vel, voluptatem veniam, accusamus pariatur delectus aliquam voluptatum quisquam voluptatibus
odio earum itaque praesentium! Voluptate voluptatem expedita reiciendis pariatur aspernatur accusamus ut nihil! Cum id veniam repellendus. Sed, corrupti. Quam laborum corporis, ipsum iste ex, quas est nihil ipsa architecto tenetur, exercitationem
qui commodi repellat. Laboriosam sit nesciunt, quidem ipsum, similique vero optio vel aperiam nemo deleniti quas voluptas? Inventore nesciunt facere consequatur tempora ad ullam sint, commodi voluptate rem temporibus repellat aut dolores accusamus,
tenetur deleniti non quam necessitatibus praesentium fugiat harum iusto eveniet? Hic suscipit corrupti libero. Ipsa dignissimos optio et eveniet nulla itaque assumenda, voluptate a nostrum quisquam consectetur eum eaque magnam nobis provident, distinctio
omnis unde eius ipsam at labore enim iusto accusantium. Beatae, ut. Odio fugit atque, ad nobis incidunt tempora vitae ullam sapiente perferendis non quas aut eos animi minus optio aspernatur voluptates debitis! Nisi, sed a exercitationem ea iure ipsa
iste accusantium. Porro, distinctio voluptatem sequi qui dolore quidem quia odio optio ullam soluta adipisci perferendis, illum reiciendis temporibus quis atque quibusdam possimus laboriosam quae id consequuntur tempore! Ipsum excepturi sapiente iure!
Modi atque provident aut accusamus est, blanditiis architecto, nulla quis quibusdam, hic nobis eligendi explicabo dolorum voluptatem beatae voluptatum sunt repellendus quam! Suscipit eum cupiditate tempore illum sed modi expedita! Eos quas dolorum
id, consectetur recusandae aliquam error nisi labore autem ullam inventore deserunt consequuntur nihil dolore tenetur sit soluta tempore quod quis doloribus sequi! Accusamus repudiandae est possimus facilis! Ab error a, culpa eaque inventore sit amet
dolorum rem, quae omnis aperiam aut nesciunt voluptas ullam dolore reprehenderit ratione et enim magnam eveniet sint iste ipsam deserunt excepturi. Ratione. Harum corporis sunt autem aperiam provident pariatur dolore eveniet consequatur repellendus
voluptate ipsa impedit, numquam illo doloremque velit excepturi quo saepe. Obcaecati, dolore neque quas eum nisi at ducimus recusandae! Debitis rerum a sapiente numquam aut doloremque cum nemo eaque, incidunt at recusandae repellat odit aspernatur
nesciunt obcaecati non velit cumque blanditiis omnis facere vero quis eos ab? Magnam, earum. Iusto voluptates repellendus facere possimus porro ducimus dicta illo, repellat ab. Iste, at obcaecati quis, fuga accusantium molestias consectetur, nobis
praesentium recusandae deleniti ut veniam. Optio debitis labore odit doloremque. Adipisci ullam repellat provident culpa ab molestias autem voluptates tempore aspernatur delectus obcaecati, corrupti nesciunt aperiam? Perspiciatis, est doloribus quam
non hic minus at laudantium unde enim voluptates sapiente officia. Aut, fugit libero, voluptatem eum ipsum consectetur vitae dolores optio modi soluta reiciendis! Sunt eum explicabo reprehenderit iure ut ab. Corrupti eligendi fugit rem sunt libero
aperiam veritatis accusamus nesciunt! Doloremque praesentium eaque nulla itaque autem eum modi maiores, nobis aperiam odio ipsam dolorem optio est nesciunt dolores, sequi beatae corrupti voluptate fuga voluptatem nemo, error ullam debitis? Incidunt,
adipisci. Vitae enim, accusantium autem aspernatur voluptatum ullam aliquam eum reprehenderit repellat hic voluptatem porro quos sunt cumque quisquam incidunt sint blanditiis sapiente odio! Eius nostrum cumque, impedit omnis saepe rem. At excepturi
enim nihil quia laudantium architecto, velit blanditiis mollitia saepe repellat iste natus ipsam! Dolor repellat illo atque ut ducimus impedit similique porro. Delectus sed nihil voluptas ducimus perspiciatis. Ex cupiditate ipsum minima veritatis
recusandae? Soluta porro magnam itaque beatae quis! Facere nesciunt dicta minus blanditiis tempora cum, nisi, a asperiores quis recusandae dolor illum non sint vero hic?</div>
</div>
I have a page layout of an header, a sidebar, and a main content. I'm using flexbox to create the layout but I want only the main content to be scrollable.
* {
box-sizing: border-box;
margin: 0;
}
header {
height: 30px;
background: #000;
}
div {
display: flex;
}
aside {
width: 200px;
background: red;
height: calc(100vh - 30px);
overflow: auto;
}
.main {
flex: 1;
}
<main>
<header>
header
</header>
<div>
<aside>Sidebar</aside>
<section class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus odit optio dicta placeat dolore beatae dolorum quos corporis vitae aliquid enim cumque aperiam molestiae eligendi a omnis, magni sint!
Voluptatum facere minima nulla atque quis, consequuntur minus excepturi! Id nesciunt ullam inventore commodi adipisci iure recusandae temporibus placeat perspiciatis consequuntur voluptatum ex, sint non cumque eos libero quis. Qui.
Ea ut alias, quasi recusandae unde maiores reiciendis corrupti at natus eligendi et, quas adipisci consectetur iusto eum perspiciatis rem nesciunt illum magni incidunt cum aperiam quos ipsum! Officia, autem.
Laudantium dolorem aliquid, distinctio possimus molestiae voluptates quis. Repudiandae eius id perferendis minima fugit quam, placeat saepe quae? Libero delectus corporis soluta debitis explicabo, rerum odit aliquam. Voluptatibus, delectus? Quia!
Illo, quo excepturi eveniet sint veritatis et sunt voluptas? Autem recusandae dolores totam exercitationem distinctio minima, eaque soluta saepe sint blanditiis sequi deleniti quibusdam facere reprehenderit, debitis fuga quas suscipit!
Temporibus, quam amet, ab modi assumenda minus esse, impedit vitae accusamus et ipsa! Amet quis cum labore minima corporis! Harum incidunt quae voluptas fugiat quod aut earum unde, reiciendis aspernatur.
Magni sequi doloremque, facilis iste quasi sed repudiandae repellat cum voluptas repellendus beatae ullam asperiores voluptatem cupiditate voluptatibus architecto tempora deleniti aperiam mollitia sint praesentium in! Mollitia nemo modi perferendis!
Architecto quos vel voluptate maxime iste quis impedit nam nostrum earum suscipit. A quidem repellendus exercitationem voluptatum magni facilis repellat impedit dignissimos adipisci quaerat non, doloremque laudantium neque, ipsum minima.
Explicabo nobis fugit quaerat, deleniti fuga natus, architecto minima ipsam vitae dicta, beatae voluptatem. Numquam accusamus error ducimus ut culpa maiores eveniet necessitatibus. Quo autem recusandae praesentium officia dolorem pariatur?
Deleniti voluptatem similique, rem qui exercitationem, aut fuga consequuntur pariatur quibusdam cupiditate amet vero et id hic recusandae nesciunt fugit. Doloribus est ducimus necessitatibus maiores expedita pariatur obcaecati omnis ut!
Amet itaque ut sed? Hic facilis voluptatum nulla necessitatibus nihil optio distinctio rerum omnis temporibus vero similique repellendus eveniet in velit illo obcaecati repellat aliquid possimus aspernatur, quo libero molestias.
Eaque sequi dolorum modi error cumque repellat excepturi sint, accusantium minima aspernatur quam quas expedita quae recusandae voluptatum nulla dolor ratione sit autem et perferendis. Laudantium sint est unde consectetur.
Nostrum saepe inventore nam commodi provident, repellat praesentium molestias doloribus optio porro quibusdam est voluptates labore quod at soluta mollitia, placeat, aut eos excepturi maiores ab. Fugiat nemo facilis illo?
Harum corporis inventore esse, tempora ipsum, sit necessitatibus eaque in mollitia voluptates dolorum doloremque natus ab. Quasi consequatur veniam voluptate obcaecati dolorem fuga omnis quibusdam numquam dignissimos et! A, rem.
Dolorem nihil placeat non, est odio temporibus eum voluptate mollitia, reprehenderit rem vero officiis beatae consequuntur quos cupiditate nobis aliquid iure quidem ducimus impedit ex illo necessitatibus. Qui, magnam ea!
Earum quae unde dolorem molestias at itaque magni doloremque consequuntur! Voluptatem odio dolorum, ea optio nihil deserunt eius tempore nisi. Doloremque reprehenderit non, harum eius commodi necessitatibus voluptas. Reiciendis, ratione?
Omnis fugit dignissimos esse magni rem doloremque quisquam deleniti iusto ut impedit laudantium error ab earum minima qui culpa ipsa rerum, quam, perferendis veritatis! Ut voluptatum tempore asperiores expedita voluptate.
Harum molestiae natus sapiente libero, voluptatum vero unde aut consequuntur tempore voluptatibus minima iure earum accusantium quaerat nesciunt dolorum fugiat repellat numquam et neque aliquam. Blanditiis modi illo facere autem?
Aliquid ut nam laboriosam officia qui tempora pariatur delectus, consectetur sapiente ipsum hic ab alias? Numquam aut doloribus veritatis amet quos veniam eos. Quidem laborum qui exercitationem dignissimos eaque officiis?
Fuga magni provident, excepturi, unde saepe architecto ad eum maxime amet nesciunt laudantium? Ea obcaecati reprehenderit cum sit suscipit minus dolore porro reiciendis dicta? Iusto officiis nam modi dolorem beatae.
</section>
</div>
</main>
How can I do this?
Just add it to your CSS
.main {
flex: 1;
max-height: calc(100vh - 30px);
overflow-y: auto;
}
you can add overflow Property
here is an example
body{
overflow :hidden;
}
.main {
flex: 1;
overflow-y:scroll;
height : 250px;
}
You can try the below code.
* {
box-sizing: border-box;
margin: 0;
}
header {
position: fixed;
width: 100%;
height: 30px;
background: #777;
}
div {
display: flex;
}
aside {
position: fixed;
margin-top: 30px;
width: 200px;
background: red;
height: calc(100vh - 30px);
overflow: auto;
}
.main {
margin-top: 30px;
margin-left: 200px;
flex: 1;
}
<main>
<header>
header
</header>
<div>
<aside>Sidebar</aside>
<section class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus odit optio dicta placeat dolore beatae dolorum quos corporis vitae aliquid enim cumque aperiam molestiae eligendi a omnis, magni sint!
Voluptatum facere minima nulla atque quis, consequuntur minus excepturi! Id nesciunt ullam inventore commodi adipisci iure recusandae temporibus placeat perspiciatis consequuntur voluptatum ex, sint non cumque eos libero quis. Qui.
Ea ut alias, quasi recusandae unde maiores reiciendis corrupti at natus eligendi et, quas adipisci consectetur iusto eum perspiciatis rem nesciunt illum magni incidunt cum aperiam quos ipsum! Officia, autem.
Laudantium dolorem aliquid, distinctio possimus molestiae voluptates quis. Repudiandae eius id perferendis minima fugit quam, placeat saepe quae? Libero delectus corporis soluta debitis explicabo, rerum odit aliquam. Voluptatibus, delectus? Quia!
Illo, quo excepturi eveniet sint veritatis et sunt voluptas? Autem recusandae dolores totam exercitationem distinctio minima, eaque soluta saepe sint blanditiis sequi deleniti quibusdam facere reprehenderit, debitis fuga quas suscipit!
Temporibus, quam amet, ab modi assumenda minus esse, impedit vitae accusamus et ipsa! Amet quis cum labore minima corporis! Harum incidunt quae voluptas fugiat quod aut earum unde, reiciendis aspernatur.
Magni sequi doloremque, facilis iste quasi sed repudiandae repellat cum voluptas repellendus beatae ullam asperiores voluptatem cupiditate voluptatibus architecto tempora deleniti aperiam mollitia sint praesentium in! Mollitia nemo modi perferendis!
Architecto quos vel voluptate maxime iste quis impedit nam nostrum earum suscipit. A quidem repellendus exercitationem voluptatum magni facilis repellat impedit dignissimos adipisci quaerat non, doloremque laudantium neque, ipsum minima.
Explicabo nobis fugit quaerat, deleniti fuga natus, architecto minima ipsam vitae dicta, beatae voluptatem. Numquam accusamus error ducimus ut culpa maiores eveniet necessitatibus. Quo autem recusandae praesentium officia dolorem pariatur?
Deleniti voluptatem similique, rem qui exercitationem, aut fuga consequuntur pariatur quibusdam cupiditate amet vero et id hic recusandae nesciunt fugit. Doloribus est ducimus necessitatibus maiores expedita pariatur obcaecati omnis ut!
Amet itaque ut sed? Hic facilis voluptatum nulla necessitatibus nihil optio distinctio rerum omnis temporibus vero similique repellendus eveniet in velit illo obcaecati repellat aliquid possimus aspernatur, quo libero molestias.
Eaque sequi dolorum modi error cumque repellat excepturi sint, accusantium minima aspernatur quam quas expedita quae recusandae voluptatum nulla dolor ratione sit autem et perferendis. Laudantium sint est unde consectetur.
Nostrum saepe inventore nam commodi provident, repellat praesentium molestias doloribus optio porro quibusdam est voluptates labore quod at soluta mollitia, placeat, aut eos excepturi maiores ab. Fugiat nemo facilis illo?
Harum corporis inventore esse, tempora ipsum, sit necessitatibus eaque in mollitia voluptates dolorum doloremque natus ab. Quasi consequatur veniam voluptate obcaecati dolorem fuga omnis quibusdam numquam dignissimos et! A, rem.
Dolorem nihil placeat non, est odio temporibus eum voluptate mollitia, reprehenderit rem vero officiis beatae consequuntur quos cupiditate nobis aliquid iure quidem ducimus impedit ex illo necessitatibus. Qui, magnam ea!
Earum quae unde dolorem molestias at itaque magni doloremque consequuntur! Voluptatem odio dolorum, ea optio nihil deserunt eius tempore nisi. Doloremque reprehenderit non, harum eius commodi necessitatibus voluptas. Reiciendis, ratione?
Omnis fugit dignissimos esse magni rem doloremque quisquam deleniti iusto ut impedit laudantium error ab earum minima qui culpa ipsa rerum, quam, perferendis veritatis! Ut voluptatum tempore asperiores expedita voluptate.
Harum molestiae natus sapiente libero, voluptatum vero unde aut consequuntur tempore voluptatibus minima iure earum accusantium quaerat nesciunt dolorum fugiat repellat numquam et neque aliquam. Blanditiis modi illo facere autem?
Aliquid ut nam laboriosam officia qui tempora pariatur delectus, consectetur sapiente ipsum hic ab alias? Numquam aut doloribus veritatis amet quos veniam eos. Quidem laborum qui exercitationem dignissimos eaque officiis?
Fuga magni provident, excepturi, unde saepe architecto ad eum maxime amet nesciunt laudantium? Ea obcaecati reprehenderit cum sit suscipit minus dolore porro reiciendis dicta? Iusto officiis nam modi dolorem beatae.
</section>
</div>
</main>
Put your text in p tag like below.
<main>
<header>
header
</header>
<div>
<aside>Sidebar</aside>
<section class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi ducimus odit optio dicta placeat dolore beatae dolorum quos corporis vitae aliquid enim cumque aperiam molestiae eligendi a omnis, magni sint!
Voluptatum facere minima nulla atque quis, consequuntur minus excepturi! Id nesciunt ullam inventore commodi adipisci iure recusandae temporibus placeat perspiciatis consequuntur voluptatum ex, sint non cumque eos libero quis. Qui.
Ea ut alias, quasi recusandae unde maiores reiciendis corrupti at natus eligendi et, quas adipisci consectetur iusto eum perspiciatis rem nesciunt illum magni incidunt cum aperiam quos ipsum! Officia, autem.
Laudantium dolorem aliquid, distinctio possimus molestiae voluptates quis. Repudiandae eius id perferendis minima fugit quam, placeat saepe quae? Libero delectus corporis soluta debitis explicabo, rerum odit aliquam. Voluptatibus, delectus? Quia!
Illo, quo excepturi eveniet sint veritatis et sunt voluptas? Autem recusandae dolores totam exercitationem distinctio minima, eaque soluta saepe sint blanditiis sequi deleniti quibusdam facere reprehenderit, debitis fuga quas suscipit!
Temporibus, quam amet, ab modi assumenda minus esse, impedit vitae accusamus et ipsa! Amet quis cum labore minima corporis! Harum incidunt quae voluptas fugiat quod aut earum unde, reiciendis aspernatur.
Magni sequi doloremque, facilis iste quasi sed repudiandae repellat cum voluptas repellendus beatae ullam asperiores voluptatem cupiditate voluptatibus architecto tempora deleniti aperiam mollitia sint praesentium in! Mollitia nemo modi perferendis!
Architecto quos vel voluptate maxime iste quis impedit nam nostrum earum suscipit. A quidem repellendus exercitationem voluptatum magni facilis repellat impedit dignissimos adipisci quaerat non, doloremque laudantium neque, ipsum minima.
Explicabo nobis fugit quaerat, deleniti fuga natus, architecto minima ipsam vitae dicta, beatae voluptatem. Numquam accusamus error ducimus ut culpa maiores eveniet necessitatibus. Quo autem recusandae praesentium officia dolorem pariatur?
Deleniti voluptatem similique, rem qui exercitationem, aut fuga consequuntur pariatur quibusdam cupiditate amet vero et id hic recusandae nesciunt fugit. Doloribus est ducimus necessitatibus maiores expedita pariatur obcaecati omnis ut!
Amet itaque ut sed? Hic facilis voluptatum nulla necessitatibus nihil optio distinctio rerum omnis temporibus vero similique repellendus eveniet in velit illo obcaecati repellat aliquid possimus aspernatur, quo libero molestias.
Eaque sequi dolorum modi error cumque repellat excepturi sint, accusantium minima aspernatur quam quas expedita quae recusandae voluptatum nulla dolor ratione sit autem et perferendis. Laudantium sint est unde consectetur.
Nostrum saepe inventore nam commodi provident, repellat praesentium molestias doloribus optio porro quibusdam est voluptates labore quod at soluta mollitia, placeat, aut eos excepturi maiores ab. Fugiat nemo facilis illo?
Harum corporis inventore esse, tempora ipsum, sit necessitatibus eaque in mollitia voluptates dolorum doloremque natus ab. Quasi consequatur veniam voluptate obcaecati dolorem fuga omnis quibusdam numquam dignissimos et! A, rem.
Dolorem nihil placeat non, est odio temporibus eum voluptate mollitia, reprehenderit rem vero officiis beatae consequuntur quos cupiditate nobis aliquid iure quidem ducimus impedit ex illo necessitatibus. Qui, magnam ea!
Earum quae unde dolorem molestias at itaque magni doloremque consequuntur! Voluptatem odio dolorum, ea optio nihil deserunt eius tempore nisi. Doloremque reprehenderit non, harum eius commodi necessitatibus voluptas. Reiciendis, ratione?
Omnis fugit dignissimos esse magni rem doloremque quisquam deleniti iusto ut impedit laudantium error ab earum minima qui culpa ipsa rerum, quam, perferendis veritatis! Ut voluptatum tempore asperiores expedita voluptate.
Harum molestiae natus sapiente libero, voluptatum vero unde aut consequuntur tempore voluptatibus minima iure earum accusantium quaerat nesciunt dolorum fugiat repellat numquam et neque aliquam. Blanditiis modi illo facere autem?
Aliquid ut nam laboriosam officia qui tempora pariatur delectus, consectetur sapiente ipsum hic ab alias? Numquam aut doloribus veritatis amet quos veniam eos. Quidem laborum qui exercitationem dignissimos eaque officiis?
Fuga magni provident, excepturi, unde saepe architecto ad eum maxime amet nesciunt laudantium? Ea obcaecati reprehenderit cum sit suscipit minus dolore porro reiciendis dicta? Iusto officiis nam modi dolorem beatae.
</p>
</section>
</div>
</main>
Give p tag fixed height set its overflow property to scroll like below.
p {
overflow: scroll;
height: 400px;
}
Add this :
.main {
height: calc(100vh - 30px);
overflow: scroll;
}
The position sticky will keep it always to the left.
* {
box-sizing: border-box;
margin: 0;
}
header {
height: 30px;
background: #000;
}
div {
width: 100%;
display: flex;
position: relative;
}
aside {
width: 20%;
background: red;
height: calc(100vh - 30px);
position: sticky;
left: 0;
top:0;
}
.main {
flex:1;
width: 70%;
}
i want to display dropdown menu upon clicking a button. But the dropdown menu is displayed not close to the button clicked and remains fixed when scrolling page vertically. Below is the code
<div>
<div onClick={this.handle_click}>
{toggle}
</div>
{this.movie_list.opened &&
<div className="dropdown_contents">
{React.Children.map(
contents,
(child, index) => { return (
child && <div
key={index}
className="dropdown_item"
onClick={this.handle_item_click}>{child}
</div>); }
)}
</div>
}
</div>);
css is as below
.dropdown_wrapper {
position: relative;
}
.dropdown_contents {
position: absolute;
background-color: $white;
/*position: absolute;*/
box-shadow: 0 8px 14px 0 rgba(6,28,63,0.3);
z-index: 10;
}
.dropdown_item {
min-width: 150px;
min-height: 40px;
display: flex;
padding: 8px;
align-items: center;
cursor: pointer;
}
when i add the class dropdown-wrapper to the topmost div element like below in the above code
<div className="dropdown_wrapper">
<div onClick={this.handle_click}>
{toggle}
</div>
The dropdown menu is not visible properly. I see that its hidden between some other element. Could some pls help with this. thanks.
You set the position on your wrapper to relative and set the z-index for your absolute positioned dropdown element.
.dropdown_wrapper {
position: relative;
}
.dropdown_contents {
background-color: orange;
width: 100px;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
}
<div class="dropdown_wrapper">
<button>
Button
</button>
<div class="dropdown_contents">
<div>Item</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur perspiciatis suscipit labore accusamus debitis adipisci praesentium accusantium dolor, possimus, itaque? Accusantium voluptate autem aperiam, recusandae facere ea eligendi temporibus qui deserunt nam commodi rerum aspernatur hic repellendus numquam odio deleniti. Modi beatae voluptate similique illo necessitatibus in, vero eaque. Aspernatur quis vero architecto natus laudantium non ullam necessitatibus, dolores commodi doloremque beatae? Atque reiciendis, minima deserunt ipsa temporibus perferendis facilis magnam ratione, nemo nobis. Placeat veritatis sunt officiis at officia dolore porro, obcaecati vero! Aspernatur magni sapiente quisquam maiores ducimus cumque sunt eos modi amet reiciendis, et, laudantium nihil.</p>
<p>Quis incidunt numquam, illum aut perspiciatis quae eum pariatur reprehenderit laborum a consequuntur aspernatur, atque ratione rem nisi unde quidem harum ab dignissimos consectetur cupiditate earum maxime temporibus. Illum rem, fugit, quidem tempore excepturi necessitatibus minima enim id similique esse, inventore, quod! Consequatur est ea, in deserunt? Fugiat assumenda omnis illo eveniet suscipit commodi nostrum quos cum odit earum. A, natus iusto repellat sint aspernatur nobis nostrum, qui fuga fugiat eligendi molestiae eius rem reiciendis architecto id temporibus ratione. Quasi officia quia, dolorum voluptate, quam libero voluptates vitae error nostrum officiis in. Impedit eos hic fuga incidunt cum vitae ex.</p>
<p>Magnam ut, quidem fugit dignissimos! Debitis praesentium, sed laborum ea repellendus itaque quisquam nesciunt possimus veritatis reprehenderit unde quidem, dolorum iste! Neque quos voluptate odio iusto quis, corporis cupiditate qui provident similique, rerum ratione, minima aspernatur. Cupiditate est laudantium, accusamus cum quas, ab rerum, consequatur nihil et itaque excepturi debitis quod quidem ducimus eaque minima libero doloribus reprehenderit inventore. Fugiat nulla, cupiditate eum quam, non vero magnam accusantium, numquam, rem laborum rerum quaerat. Nulla fugit repellendus iusto neque expedita esse ullam pariatur, quae fugiat modi asperiores unde alias voluptates quas ad quos dicta, soluta voluptatibus. Itaque totam quisquam modi temporibus.</p>
<p>Atque amet ducimus quibusdam voluptas, recusandae natus, doloremque reiciendis. Est sit non possimus libero at animi illo beatae nihil excepturi quos omnis, atque repellendus esse harum similique debitis delectus voluptate! Fugit saepe incidunt eos voluptatibus, dignissimos excepturi obcaecati velit expedita odit ipsum placeat molestias unde esse cupiditate laborum ratione nihil veniam totam rem magnam recusandae itaque, doloribus aut commodi. Amet, illum quae necessitatibus sint similique, velit officiis tempora neque corporis rem, ipsam ad maxime distinctio ea. Eius, inventore? Amet corporis fuga sed, perferendis quam ut dignissimos a molestiae. Cupiditate, saepe, totam. Ratione laborum a eaque. Recusandae, illum incidunt eum eveniet?</p>
<p>Porro autem veniam doloribus aliquam, repellat excepturi libero maiores soluta cumque impedit eligendi cupiditate quo, recusandae nesciunt ex optio, voluptas quia sit. Nobis nisi soluta, ab odit quae. Quia, minus placeat numquam, quisquam adipisci vel quaerat omnis quae! Ut odit, rerum. Fugiat totam dolores itaque sint repellat quo, aliquid obcaecati quasi ducimus architecto minima commodi eum quod qui laboriosam maiores voluptatibus. Debitis nulla autem soluta doloribus ipsa hic, harum mollitia incidunt sapiente, pariatur velit veniam maiores, repudiandae, consequatur quae accusantium at cupiditate illum dignissimos reprehenderit. Facere tenetur, voluptates dicta nesciunt, aliquam, neque cum est mollitia veritatis sequi magnam et cumque.</p>
<p>Explicabo possimus laboriosam quas facilis vero impedit modi enim iusto tempora magnam, at, ratione, amet qui consectetur. Alias est accusantium molestiae consectetur non enim ipsam harum, a, magnam sequi praesentium doloremque at iure iusto unde obcaecati veniam laudantium quidem quos molestias, doloribus quae id quod aliquid commodi. Unde sequi dicta doloremque dolorum repellat ipsam. Sit eos iusto reiciendis tempore hic magni corporis molestias, delectus consequuntur non obcaecati neque voluptatum assumenda, aut rerum iure autem tempora reprehenderit cumque tenetur quibusdam nihil facilis, nemo eveniet nesciunt. Totam, ea, explicabo. Iure veniam neque, consequuntur rem, libero obcaecati eius dignissimos exercitationem. Consequuntur, libero, temporibus.</p>
<p>Ad magnam corporis iure culpa dolorem vero quia, neque, ipsa quas. Qui odio perspiciatis debitis aperiam asperiores, nobis, velit ipsum tempora fuga possimus tenetur eos reprehenderit non ratione. Nesciunt inventore, suscipit architecto eligendi, nemo omnis minus. Quisquam et minima animi accusamus eligendi. Ullam pariatur, quia quidem molestias dolores, expedita. Vero magni tempore aliquid iure tenetur mollitia hic unde obcaecati enim at amet adipisci cum fugiat quam fuga eveniet saepe illum, reiciendis! Atque suscipit molestiae ex assumenda, consequuntur voluptates aliquid voluptatum excepturi optio velit facere reiciendis voluptate natus soluta asperiores praesentium necessitatibus id omnis. Explicabo laborum earum, dolore tenetur, ipsam numquam.</p>
<p>Dolorem eos, quaerat officiis nobis. Officiis rem eligendi temporibus dolore expedita, similique reiciendis ab magnam, inventore eaque fugiat nobis voluptatem voluptatum dolorum obcaecati excepturi molestias iusto unde aperiam a velit. Quasi minima perspiciatis dolor inventore, quisquam laudantium porro veniam possimus, dignissimos suscipit, ipsum aliquam iste nulla aut incidunt praesentium tenetur doloribus laborum ab animi. Neque hic, tempore enim eius accusantium fugiat architecto, assumenda laborum sit aut cumque natus, magni voluptatem iusto eligendi est modi unde aliquam quaerat. Perspiciatis quidem, cumque ex libero accusamus, magnam consequuntur quis similique facilis! Fuga dignissimos fugit suscipit harum hic blanditiis amet magnam nam cumque nostrum.</p>
I am using float to make text wrapped image. However, there is an unexpected margin at the bottom of the floated images. Is there any solution to fix the situation?
p{
font-size: 16px;
}
img{
float: left;
margin: 18px 18px 18px 0;
}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur suscipit debitis labore illo quod aut itaque id laudantium. Amet, magnam aliquam recusandae fugit sint quidem eveniet tenetur quasi voluptatum? Debitis officia dolores exercitationem, consequuntur quia ipsum obcaecati praesentium! Sit totam ipsam culpa, ipsa odit officiis voluptates dolorem asperiores veritatis quibusdam, libero voluptas modi provident dignissimos necessitatibus eum quaerat temporibus reiciendis expedita aliquid recusandae fugit. Esse sunt, nulla sint exercitationem quae, ad magnam laudantium quibusdam voluptatibus quia, voluptas corporis! Ab ad amet at corrupti atque voluptatum omnis cumque iure consequatur quia quaerat nemo, impedit, provident distinctio blanditiis quo exercitationem dolorum eos!
<img src="https://placeimg.com/420/320/any">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate iusto molestiae expedita nesciunt? Ducimus earum perspiciatis quam a incidunt nemo exercitationem id itaque reiciendis? Error tempore eligendi, voluptatem incidunt perspiciatis aspernatur, unde cupiditate in, enim ullam culpa? Et debitis ipsa nobis amet ea perspiciatis temporibus qui quos dolores totam, voluptatem impedit fugiat facere accusamus illo, voluptatibus inventore autem, libero provident enim eius. Expedita modi deleniti consequuntur deserunt quas praesentium incidunt doloremque quos voluptas accusamus nihil alias labore architecto cum, atque, dolores nisi dolorem perspiciatis quibusdam autem, neque magni quo! Maiores, nam, rerum ad ipsa libero consectetur quis reprehenderit facilis vel impedit optio rem cupiditate necessitatibus qui deserunt est repellendus molestiae nobis quisquam alias id!
</p>
Change you're margin to margin: 18px 18px 0px 0px;
It margins and paddings with 4 arguments go: top, right, bottom, left. so you were adding the 18px in the third argument
The margin is in fact an additional line of text.
You should change the line-height to fit the wanted margin. Try :
p{
line-height:18x;
font-size: 16px;
}
img{
float: left;
margin: 18px 18px 18px 0;
}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur suscipit debitis labore illo quod aut itaque id laudantium. Amet, magnam aliquam recusandae fugit sint quidem eveniet tenetur quasi voluptatum? Debitis officia dolores exercitationem, consequuntur quia ipsum obcaecati praesentium! Sit totam ipsam culpa, ipsa odit officiis voluptates dolorem asperiores veritatis quibusdam, libero voluptas modi provident dignissimos necessitatibus eum quaerat temporibus reiciendis expedita aliquid recusandae fugit. Esse sunt, nulla sint exercitationem quae, ad magnam laudantium quibusdam voluptatibus quia, voluptas corporis! Ab ad amet at corrupti atque voluptatum omnis cumque iure consequatur quia quaerat nemo, impedit, provident distinctio blanditiis quo exercitationem dolorum eos!
<img src="https://placeimg.com/420/320/any">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio cupiditate iusto molestiae expedita nesciunt? Ducimus earum perspiciatis quam a incidunt nemo exercitationem id itaque reiciendis? Error tempore eligendi, voluptatem incidunt perspiciatis aspernatur, unde cupiditate in, enim ullam culpa? Et debitis ipsa nobis amet ea perspiciatis temporibus qui quos dolores totam, voluptatem impedit fugiat facere accusamus illo, voluptatibus inventore autem, libero provident enim eius. Expedita modi deleniti consequuntur deserunt quas praesentium incidunt doloremque quos voluptas accusamus nihil alias labore architecto cum, atque, dolores nisi dolorem perspiciatis quibusdam autem, neque magni quo! Maiores, nam, rerum ad ipsa libero consectetur quis reprehenderit facilis vel impedit optio rem cupiditate necessitatibus qui deserunt est repellendus molestiae nobis quisquam alias id!
</p>