0

右の列のコンテンツを縦にスクロールできるようにしたいと思います。ここで私が間違っていることを誰かに教えてもらえますか?

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<html>
  
  <body>
    <main class="h-full">
      <div class="container flex items-start min-w-full fixed">
         <div class="w-1/5 min-h-screen bg-blue-darkest text-teal-lightest">
           bladieblabla
        </div>
         <div class="w-4/5 flex content-center pt-6 min-h-screen w-full lg:static lg:max-h-full lg:overflow-visible bg-yellow" >
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultricies elit sed varius semper. Cras elit nunc, auctor eget magna nec, posuere scelerisque sapien. Suspendisse volutpat, turpis vitae sagittis lacinia, felis nisi fermentum massa, ut fringilla tortor lacus eu augue. Morbi nunc odio, ullamcorper vel porta nec, maximus ac orci. Nulla quis accumsan magna. Suspendisse sollicitudin molestie lectus vitae imperdiet. Fusce fermentum convallis volutpat. Praesent et malesuada justo, non varius quam. Fusce faucibus lacus elit, in sodales ex blandit tincidunt. Nunc mollis cursus purus sed convallis.

Duis consectetur in urna volutpat maximus. Sed viverra placerat enim ut venenatis. Praesent cursus diam facilisis turpis tempor accumsan. In vel sollicitudin orci, id volutpat turpis. Donec mattis, lacus nec eleifend venenatis, turpis leo rutrum ante, sit amet laoreet nulla mauris in velit. Curabitur hendrerit leo leo. Phasellus sit amet sem non mi pharetra pharetra vitae in sem. Nullam egestas, metus nec imperdiet ornare, est neque luctus diam, eget elementum mi ante non leo. Aenean maximus nisi vitae aliquam ullamcorper. Donec et lectus quam. Maecenas sit amet placerat mi. Maecenas cursus mauris et purus fermentum, ac sagittis quam varius. Praesent non magna dictum, pulvinar magna at, consectetur risus. Mauris pretium, massa non posuere condimentum, diam est mattis nibh, non gravida odio augue vitae eros.

Aliquam pharetra viverra metus, non lacinia diam vehicula vitae. Proin auctor elit pellentesque nunc iaculis eleifend nec et mauris. Fusce luctus est sed sollicitudin ultricies. Suspendisse potenti. In risus arcu, semper malesuada maximus nec, malesuada at leo. Proin convallis leo ac urna fringilla placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam felis est, pretium ut magna non, venenatis accumsan sem. Proin nisl dui, luctus ac consectetur ac, dictum a dui. Nulla non justo eu velit eleifend auctor. Pellentesque sit amet tincidunt sem. Morbi fringilla lectus ut turpis feugiat, at pretium orci varius. Morbi varius nunc eget turpis imperdiet, id tincidunt ligula commodo. Nullam eleifend nisi vel lacus posuere sagittis. Nunc eu placerat ante, quis accumsan mi.

Quisque dapibus porttitor porta. Donec sagittis velit in massa aliquam, et rutrum ante pellentesque. Nulla malesuada imperdiet placerat. Fusce elit elit, euismod non elit in, tempus consequat ante. Curabitur tellus tellus, posuere vitae iaculis et, iaculis ut arcu. Nam nulla dui, luctus in fermentum varius, convallis in velit. Phasellus aliquam nec odio sed finibus.

Praesent sed interdum justo. Phasellus tristique mauris eget blandit semper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris consequat, sem et euismod accumsan, quam mi laoreet enim, sed commodo risus nisl eget nulla. Donec et imperdiet ex, eu porttitor dui. Sed magna ex, egestas vitae nunc in, dignissim tincidunt purus. Sed volutpat neque nec ipsum ultricies, a pretium mi tempus. Vestibulum placerat velit at lacus lacinia, id pulvinar leo finibus. Mauris congue metus at faucibus maximus.

Nam maximus viverra urna, nec volutpat libero dapibus at. Praesent quis mattis ipsum. Aliquam nisl lectus, facilisis eget risus vitae, pellentesque convallis velit. Nam ac hendrerit massa. Sed in lacus fringilla, aliquam diam quis, viverra odio. Vestibulum vehicula augue et turpis tempor, fringilla pharetra velit tincidunt. Pellentesque blandit commodo odio id tempor. Praesent pellentesque elementum lorem, nec fermentum nibh volutpat ac. Mauris non massa fringilla, feugiat enim sed, sodales mi. Morbi imperdiet tempus diam ut egestas. Aliquam sit amet neque quis purus posuere mollis. Donec ultrices lectus ipsum. Pellentesque id ornare magna. Duis scelerisque lobortis nisi, nec auctor enim tincidunt nec. Praesent ultricies orci a augue feugiat, eget rutrum elit egestas. Morbi pharetra ligula sit amet massa sodales congue et pellentesque ex.

Proin elementum lectus enim, sed tincidunt nunc molestie vitae. Aenean a nisi ut ipsum blandit lobortis quis sit amet mauris. Vivamus id tempus odio, ac vehicula sem. Vestibulum tincidunt dolor id nisi tempus feugiat. Cras in iaculis lectus, sed malesuada diam. Aenean eget elit ut nulla sollicitudin hendrerit quis sit amet arcu. In nec sem fringilla enim viverra vulputate.

Mauris sit amet purus euismod, laoreet turpis vel, iaculis neque. Aliquam erat volutpat. Phasellus ultrices imperdiet ex, id maximus augue fringilla eget. Praesent sapien neque, dignissim eget metus nec, tempor auctor purus. Mauris quis felis eleifend, consectetur tellus vitae, fringilla tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum metus risus, viverra nec nisl a, cursus rutrum massa. Vestibulum molestie a nibh lobortis iaculis. Vivamus congue elementum lacus, ut euismod lectus blandit at.

Suspendisse ac velit finibus, placerat neque quis, blandit dolor. Duis condimentum sagittis eros in facilisis. Nulla tempor libero vitae risus accumsan tempus. Proin aliquet auctor dolor, interdum pulvinar tellus vulputate et. Proin cursus mi eget augue venenatis, id pulvinar metus tristique. Nulla ut mattis libero. Nulla facilisi. Pellentesque tempus ultrices est sit amet dapibus. Morbi congue sodales turpis, ut rutrum felis interdum sed. Curabitur condimentum nibh sed porttitor sodales.

Integer lacinia, mauris et tempor congue, libero lorem euismod sapien, dictum efficitur ex massa in velit. Nam bibendum erat a ipsum bibendum, in pharetra ante pellentesque. Sed vestibulum mauris lectus, nec tincidunt orci tempor ac. Suspendisse potenti. Etiam iaculis turpis eget arcu lacinia dapibus. Sed at mollis lorem. Cras fringilla convallis tristique. Sed quis tortor fringilla, dignissim massa eu, auctor enim. Cras id faucibus sem. Cras egestas dui pulvinar malesuada ultricies. Donec rutrum ligula justo, at congue elit porttitor in. Etiam faucibus urna et leo vehicula, eget consectetur sapien tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus ultricies urna arcu, eget consequat purus eleifend in. Mauris semper consectetur semper. Aliquam sed ornare est, sit amet faucibus lectus. Nulla facilisi. Nulla ac tincidunt ligula. In auctor fermentum enim vel laoreet. Suspendisse blandit ornare felis, et volutpat metus hendrerit vitae. Suspendisse potenti. Aliquam tristique arcu nec leo venenatis iaculis. Curabitur sed libero quis diam molestie pulvinar nec vel leo. Sed vitae scelerisque ipsum. Proin vel dolor nec quam consectetur placerat. Donec lobortis justo ex, quis dapibus tortor tincidunt non. Nullam sed sem vel erat mattis convallis non nec lacus.

Suspendisse fermentum tempus enim, ac euismod tortor fringilla in. Morbi eu massa sollicitudin, dictum risus et, venenatis ex. Donec vel nisl purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor urna dignissim, auctor arcu in, porttitor tellus. Suspendisse orci turpis, semper id eros non, pellentesque rutrum metus. Proin sollicitudin ultricies elementum. Nunc aliquet sapien orci, sit amet consectetur purus dictum eget. Ut ac massa bibendum, blandit massa sed, lobortis elit.

Aenean et scelerisque odio. Vestibulum scelerisque elit eget mauris hendrerit, eget commodo metus dapibus. Proin vehicula quam magna, vitae consequat felis facilisis eu. Quisque et risus vitae elit viverra accumsan at ac nisi. Duis sem nisi, rhoncus a justo nec, sodales dictum tellus. Quisque feugiat dui nec tortor mollis, non facilisis turpis dictum. Donec tempus, risus et luctus tempor, mauris neque vestibulum dolor, in dictum felis neque a nisi. Integer vel facilisis ipsum. Nulla venenatis tempus ornare. Donec tincidunt purus in blandit volutpat.

Fusce pellentesque, massa quis posuere luctus, tellus metus ultricies arcu, eget consectetur lacus lacus a felis. Quisque eget auctor felis, non commodo nisl. Nunc nisi metus, vehicula quis odio a, dictum mollis ipsum. Fusce in est lacus. Suspendisse potenti. Curabitur libero lorem, semper et convallis faucibus, faucibus nec sem. Mauris porttitor neque tellus, sit amet dignissim tellus blandit non. Donec tempor, nunc non rhoncus viverra, nunc metus malesuada elit, in ornare erat erat ut metus. Proin vel nibh risus. Praesent turpis elit, semper eu tortor et, pretium laoreet neque.

Integer quis massa in justo vestibulum mattis. Ut a sem ac odio ullamcorper aliquet. Aliquam arcu magna, fermentum vel dolor pulvinar, commodo rutrum ex. Phasellus in massa non risus posuere scelerisque. Integer et augue nulla. Donec tempus lectus eget nibh viverra, at varius libero mattis. Pellentesque et quam quis libero vestibulum pharetra. Fusce sagittis cursus volutpat. Fusce euismod libero in pulvinar finibus. Proin vel justo feugiat, tempor nisi quis, vestibulum lectus.

Praesent tristique risus lectus, in commodo felis viverra in. Etiam maximus, eros eu cursus varius, est nunc venenatis neque, pretium laoreet orci ipsum ut dui. Integer eget blandit massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas nec euismod odio. Vivamus eget laoreet enim. Donec ornare sapien dui, ut venenatis odio interdum tristique. Nullam eget metus et quam molestie condimentum et eget velit. Ut in lacus ipsum. Sed fringilla ex et faucibus ornare. Sed imperdiet neque non neque eleifend eleifend.

Vivamus ante metus, hendrerit at sapien sit amet, suscipit egestas magna. Sed consequat sed sapien et efficitur. Pellentesque sodales sapien justo, eu gravida nulla venenatis ac. Ut dictum vehicula diam, vel tempus ligula hendrerit id. Pellentesque quis maximus diam. Fusce et enim sagittis, porta nunc a, pulvinar nisl. Integer molestie velit sollicitudin viverra vestibulum. Quisque ac dignissim turpis, ac sollicitudin augue. Sed id imperdiet felis. Fusce et elit iaculis, rhoncus velit in, fringilla dolor. Donec non placerat sem. Integer interdum, justo et facilisis tristique, ligula est interdum lectus, interdum rutrum tortor nisl at felis.

Vestibulum quis pellentesque erat, et ultricies velit. Fusce finibus non lectus dignissim accumsan. Pellentesque eu commodo turpis, at dapibus lorem. Cras tempor fringilla lectus, et cursus magna molestie at. Quisque bibendum vel sapien a tempus. Pellentesque quis nunc a lectus euismod dignissim. Nullam fermentum posuere dignissim. Vivamus fringilla augue non turpis bibendum sollicitudin. Cras nec nibh id turpis tincidunt consequat gravida a purus. Nam in metus libero.

Donec quis ultrices ipsum, id elementum eros. Vestibulum odio tellus, cursus eu quam fringilla, blandit posuere magna. Proin efficitur, purus lobortis fringilla sagittis, lorem elit suscipit nisi, varius molestie mi est eu neque. Pellentesque cursus ante vitae interdum iaculis. Curabitur non auctor enim. Pellentesque nisl augue, semper sed ullamcorper eu, maximus sed lectus. Vivamus ornare mauris in quam placerat imperdiet.

Suspendisse blandit tincidunt orci ut blandit. Proin dictum lorem purus, quis rhoncus neque sollicitudin ut. Sed et hendrerit nisl. Aenean placerat, sem nec tincidunt vehicula, augue dui pharetra arcu, sit amet congue sem justo eu nibh. Vestibulum fermentum augue pharetra mi elementum vulputate. In non velit egestas augue cursus posuere sit amet ut metus. Aliquam aliquam ac odio eget porttitor. Integer pharetra hendrerit eros eget commodo.

Proin urna elit, elementum rhoncus orci vitae, feugiat volutpat ante. Sed vitae hendrerit diam, nec faucibus nisi. Nam ullamcorper, erat sit amet suscipit tempor, nunc eros malesuada lorem, sit amet semper ex justo a massa. Ut at laoreet nulla. Mauris tempor aliquam enim, ut euismod lorem dignissim eu. Donec aliquet finibus nulla in sagittis. Sed est tellus, finibus ac odio ut, bibendum dignissim risus. Praesent quis lectus ut quam elementum pretium. Vestibulum gravida tincidunt tellus ac venenatis. Phasellus est massa, mollis at diam nec, tincidunt tincidunt orci. Nullam ut imperdiet nulla, et efficitur ante. Proin nec dui faucibus, rhoncus orci at, gravida mauris. Fusce ultricies vestibulum massa vitae vulputate.

Nunc sed congue ligula. Vivamus non diam nisi. Vivamus vestibulum nibh dolor, vel volutpat tellus facilisis sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam lacus odio, pellentesque et arcu ut, iaculis vulputate est. Maecenas dapibus, elit nec placerat sollicitudin, velit neque sodales nibh, et commodo justo turpis sed mauris. Fusce finibus commodo est eget accumsan. Cras maximus, nisl at tincidunt eleifend, nisl massa eleifend diam, a lobortis orci mauris et neque. Maecenas pellentesque sapien vitae erat malesuada, ut scelerisque magna volutpat.

Mauris vitae neque nibh. Fusce quis ante nec mi vulputate commodo quis et ante. Nulla sit amet leo ut lacus condimentum accumsan ultrices non neque. Aenean non sollicitudin arcu. Proin aliquam suscipit auctor. Suspendisse potenti. Nulla at diam fermentum, placerat libero a, consectetur lacus. Curabitur non viverra erat, vel molestie nisl.

Fusce id consectetur lacus. Cras fermentum, lorem a rutrum rhoncus, lacus magna cursus ex, condimentum porttitor eros ex id magna. Nunc laoreet rutrum augue at mattis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis urna. Integer a libero tortor. In sollicitudin nisl diam, sit amet lacinia augue dictum a.

Quisque rutrum volutpat imperdiet. Aliquam varius pretium porttitor. Suspendisse mattis ipsum non feugiat tincidunt. Maecenas placerat justo dignissim, aliquet massa id, ornare lorem. Sed vitae sodales eros, non iaculis nunc. Vestibulum at cursus felis, sit amet congue diam. Aliquam efficitur vestibulum gravida. Sed ut maximus ex, in pulvinar urna. Vestibulum rhoncus sed enim vitae imperdiet. Donec efficitur massa a consectetur cursus. Nulla diam metus, sagittis sed vehicula et, blandit vel nisl. Nullam ac hendrerit massa. Vivamus diam justo, pellentesque vel dui et, porttitor fringilla nibh. Vestibulum sed orci accumsan, varius lorem vitae, vulputate est. Quisque efficitur placerat turpis eu sollicitudin.

Sed at suscipit tellus. Nunc hendrerit, ante molestie blandit tincidunt, ipsum diam gravida magna, eu auctor odio neque vitae leo. Fusce non tellus quis sem gravida pulvinar id nec neque. Integer suscipit ultricies mollis. Quisque finibus interdum urna ut vestibulum. Integer rutrum suscipit enim id porta. Nunc eleifend consectetur quam, ac commodo magna pellentesque sed. Nullam aliquam lacus ut posuere tincidunt. Mauris gravida tincidunt ligula, vitae accumsan nisi. Cras quis pharetra urna. Praesent sagittis turpis quis finibus sollicitudin. Aenean nec tincidunt lectus. Sed fermentum et neque sit amet malesuada. Nam dolor ante, porttitor eget faucibus at, rutrum vitae mauris. Curabitur mattis a enim at consectetur. Fusce vel dapibus ipsum, ac consectetur augue.

Vivamus vulputate maximus tortor, quis sodales elit scelerisque id. In sagittis nibh id porttitor pellentesque. Sed at sollicitudin quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis mattis finibus. Nam in ipsum sit amet risus mattis blandit. Nulla rutrum ac ex quis viverra. Ut euismod velit quis risus maximus cursus. Aenean nec eros tristique nibh ultrices imperdiet. Proin consectetur elit id tellus convallis, id aliquet massa dictum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vestibulum mi enim, eget finibus ipsum bibendum ut. Cras imperdiet, leo nec molestie scelerisque, mauris ipsum egestas elit, sed volutpat magna arcu non dolor. Etiam ornare tincidunt mi posuere gravida. Nam arcu justo, volutpat sit amet ultrices vel, vestibulum id risus. Nullam rutrum erat eu ipsum bibendum dictum.

Aenean lectus lectus, mollis ac enim venenatis, ullamcorper feugiat dolor. Nullam a est in neque lobortis ultrices. Integer ut imperdiet dui. Nam sed ex elit. Aliquam sagittis tellus massa, et pharetra velit euismod eu. Nullam sollicitudin sed dolor nec dapibus. Vestibulum quam dolor, bibendum nec fringilla ut, interdum non metus. Quisque eleifend, felis quis mollis convallis, odio dui molestie lorem, eu faucibus lacus felis eget turpis. Sed ornare mi nisi, ut egestas ex faucibus ut. Vivamus sed aliquet justo, at ullamcorper magna. Duis quis mi id lorem eleifend mattis ac sed augue.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer a nibh euismod, ultrices nibh nec, scelerisque purus. Nulla tempor consectetur velit. Aenean venenatis lacus eget vestibulum ultricies. Nam vulputate aliquam lobortis. Morbi facilisis interdum tincidunt. Phasellus congue condimentum odio eu rhoncus. Duis libero diam, porta id eleifend nec, aliquam et velit. Nulla pretium ultrices massa. Etiam ac tincidunt risus, vel congue lorem. Integer tristique, augue non semper porta, magna ante scelerisque eros, nec aliquam turpis sapien in ipsum. Donec sed mollis eros, ut feugiat massa.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id mauris justo. Phasellus suscipit metus nec ex dapibus, sit amet placerat nibh ultricies. Sed laoreet urna vitae scelerisque scelerisque. Nunc ultricies leo eget justo mattis, vel pellentesque mauris imperdiet. Morbi sit amet lobortis ex, non sodales sapien. Cras sagittis nibh et posuere placerat. Vestibulum hendrerit at nulla vitae luctus. Vestibulum maximus ex at justo lacinia pellentesque. Ut fringilla mauris sem. Aenean ut dictum est. Curabitur eu dolor nibh. Quisque volutpat metus at elit tempor, eu ornare lectus bibendum. Integer tellus neque, ullamcorper id feugiat eu, vestibulum nec mi.
           </div>
         </div>
      </div>
    </main>
    
  </body>
</html>

4

2 に答える 2