We Keep Coding

Why does my element have a scrollbar even though it fits its container?

I am writing code in jsPsych (a JavaScript library) and am trying to display a + on my screen. The + has a maximum height of 85vh and a maximum width of 85vw, though it does not reach either because it is only 60px. However, even though the + fits its container, there is a scrollbar on it.
I do not understand why there are scrollbars. I am using overflow-y:auto, so the scrollbar should only appear if necessary. However, I know that it is unnecessary because displaying a box of 85vw x 85vh around the + shows that the + is less than these dimensions.
Please see my code snippet for a visual. Note that I am using jsPsych 6.3, which is not available online. Therefore, the JavaScript code in the snippet uses jsPsych 7.0, but the CSS code is from jsPsych 6.3. I think the scrollbar problem comes from the CSS 6.3 code, because it disappears when I replace CSS 6.3 with CSS 7.0.
Does anyone know why there is a scrollbar on my +?
const jsPsych = initJsPsych();
const trial = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div class="box">' +
'<div class="cross">+</div>' +
'</div>'
}
jsPsych.run([trial])
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
/* Container holding jsPsych content */
.jspsych-display-element {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.jspsych-display-element:focus {
outline: none;
}
.jspsych-content-wrapper {
display: flex;
margin: auto;
flex: 1 1 100%;
width: 100%;
}
.jspsych-content {
max-width: 95%;
/* this is mainly an IE 10-11 fix */
text-align: center;
margin: auto;
/* this is for overflowing content */
}
.jspsych-top {
align-items: flex-start;
}
.jspsych-middle {
align-items: center;
}
/* fonts and type */
.jspsych-display-element {
font-family: 'Open Sans', 'Arial', sans-serif;
font-size: 18px;
line-height: 1.6em;
}
/* PROJECT STARTS HERE */
.box {
border-style: solid;
width: 85vw;
height: 85vh;
}
.cross {
font-size: 60px;
max-width: 85vw;
max-height: 85vh;
overflow-y: auto;
}
<script src="https://unpkg.com/jspsych#7.0.0"></script>
<script src="https://unpkg.com/#jspsych/plugin-html-keyboard-response#1.0.0"></script>

Change your overflow-y to hidden. I see it in the snippet but not at full screen. Your container for your cross doesn't have any margins or padding applied so it's probably using browser defaults and causing it to touch the top of the container it's in just enough to create a scroll at a small enough screen size.
Edit: on the cross that is, sorry had the wrong class selected in the inspector
.cross {
font-size: 60px;
max-width: 85vw;
max-height: 85vh;
overflow-y: hidden;
}

How to make two columns same height dynamically

I hava a page with two columns. I would like to textarea height mimic left column height. Left column is short when webpage loads, but when user starts expanding various properties (checkboxes + dropdownmenus) it grows based on hidden divs. But my textarea is still small in right column and making it staticly bigger does not look good.
I want it to grow per left column height. Not sure how to achieve that.
EDIT:
Once height: 100%; was added to textarea it solved the issue with columns growth.
But I ran into another two issues.
Textarea in right column overlaps that column on page load. When I try to resize, it suddenly jumps to the column properly. Weird behavior.
here is the pic - textarea overlaps column
Left column context is not aligned properly with right. How I am going to align or justify context of both columns so they end up like this:
here is the pic - final look
My CSS:
body {
height: 100%;
position: relative;
background: #000000;
color: #66adff;
font-size: 105%;
font-family: serif, Arial, Helvetica
}
.column {
border: 5px solid #333;
}
.container{
display: flex;
}
.columnleft {
width: 45%;
padding: 10px;
display: table-cell;
}
.columnright {
width: 45%;
padding: 10px;
display: table-cell;
}
textarea.out {width: 100%; height: 100%; box-sizing: border-box;}
EDIT 2:
Issue 1 - I had text inside the column which pushed area down
Issue 2 - all was fixed with proper padding
Thanks all for replies.

I think you could do this without js, but use CSS Grid instead.
Example:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; // the width of each column
grid-template-rows: auto; // row height will auto-adjust to contents
}
<div class="grid-container">
<div class="column-left">
...some dynamic content
gets bigger and bigger and bigger and bigger and bigger
</div>
<div class="column-right">
might be empty or small or large
</div>
</div>
The grid row height will always adjust to the height of the largest content which will make both columns the same height.

Since you're using flex, the right column should be automatically adjusting to match the left column. It sounds like your issue is that the textarea is not expanding automatically to match its container (right column.)
If that's the case, try this simple fix - in your CSS, set textarea height to 100% to automatically fill its parent:
textarea {
height: 100%;
};
Here's an example answer:
Textarea to fill a parent container exactly, with padding

The reason your code wasn't working was because you didn't set the height to your textarea settting the height to 100% will always make it fit the maximum size of it's container (<div>) also i have added box-sizing: border-box; so that you can add padding to your columnright.
A better explanation about box-sizing can be found here (just won't explain here because i couldn't do better then this): https://css-tricks.com/box-sizing/
function f_anyEvent(){
var leftcolumnHeight = document.getElementById('columnleft').style.height.value;
if (document.getElementById('columnleft').style.height != document.getElementById('columnright').style.height)
document.getElementById('columnright').style.height = leftcolumnHeight.value;
}
document.getElementById('add').addEventListener('click', function() {
let columnleft = document.getElementById('columnleft');
columnleft.innerHTML += '<h1>a</h1>';
});
.row{
display: flex;
}
.column {
border: 1px solid #333;
}
.columnleft {
float: left;
width: 45%;
padding: 10px;
display: table-cell;
}
.columnright {
float: left;
width: 45%;
padding: 10px;
display: table-cell;
}
textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
<div class="row">
<div id="columnleft" class="column columnleft">
</div>
<div id="columnright" class="column columnright">
<textarea></textarea>
</div>
</div>
<button id="add">
add
</button>
Every time you click add it will add an <h1> to your left column and your textarea will get the same height as columnleft.

Here's a basic demo of an interface similar to yours that uses display: grid on the parent container to automagically keep the two inner divs the same height. (Click on the blue details element to trigger a height change.)
It's wonderfully simple. (Thanks for inspiring me to finally learn how grid works.)
// The JavaScript isn't needed for the dynamic styling. (It just copies the text.)
const
left = document.getElementById("left"),
right = document.getElementById("right");
left.addEventListener("change", showOutput);
function showOutput(event){
right.innerHTML = this.querySelector("#reasons").value
}
div { max-width: 400px; border: 1px solid grey; }
details{ margin: 10px 5px; color: #0000DD; text-decoration: underline; }
/* This is where the magic happens */
#container { display: grid; grid-template-columns: 1fr 1fr; }
#left{ padding: 10px; }
#right { white-space: pre-wrap; }
<div id="container">
<div id="left">
<label> <input type="checkbox"/> I like pie </label>
<details>
<summary>Type your reasons here</summary> <textarea id="reasons"></textarea>
</details>
</div>
<div id="right"></div>
</div>

How to make div bigger and change it's content on hover?

I want a div to become bigger ("covering" area of other divs) and change it's content on hover.
Here is a code snippet showing how my page currently looks like:
.page__container {
display: grid;
grid-template-areas: "left-sidebar first-tile second-tile right-sidebar"
"left-sidebar third-tile fourth-tile right-sidebar";
grid-template-columns: 15% 35% 35% 15%;
}
.page__sidebar {
text-align: center;
background-color: black;
color: white;
}
.page__sidebar--left {
grid-area: left-sidebar;
}
.page__sidebar--right {
grid-area: right-sidebar;
}
.page__tile {
height: 100px;
line-height: 100px;
text-align: center;
vertical-align: middle;
}
.page__tile--first {
grid-area: first-tile;
background-color: white;
}
.page__tile--second {
grid-area: second-tile;
background-color: black;
color: white;
}
.page__tile--third {
grid-area: third-tile;
background-color: black;
color: white;
}
.page__tile--fourth {
grid-area: fourth-tile;
background-color: white;
}
<div class="page__container">
<aside class="page__sidebar page__sidebar--left">
<span>Sidebar</span>
</aside>
<div class="page__tile page__tile--first">
<span>Components</span>
</div>
<div class="page__tile page__tile--second">
<span>Peripherals</span>
</div>
<aside class="page__sidebar page__sidebar--right">
<span>Sidebar</span>
</aside>
<div class="page__tile page__tile--third">
<span>Laptops</span>
</div>
<div class="page__tile page__tile--fourth">
<span>Accessories</span>
</div>
</div>
This is how I want it to look like when I hover over the first tile (components).
I don't know whether it is possible to do using grids or no so I am open to various suggestions about potential changes in my code.

I would recommend using JavaScript for this. You can't possibly use grids, grids are useful only for layouts. The closest thing we have to a parent selector in CSS is :focus-within pseudo element.
:focus-within

For changing the size, you can use scale command in CSS; more here.You could also use the z-index command in order to a div appear in front of other. However, I think that this kind of animation is a lot better to do using javascript. There are a lot of tutorials on youtube that cover javascript animations like this.

How to make one div always be at the bottom of the view and make top div resize based on bottom div?

I'm pretty new to web development and I'm working on something which requires two divs to always take up 100% of the viewport.
I have div A which is an interactive image that should be as big as possible and should take up the top part of the screen.
Then div B which contains either 1 or 2 buttons depending on what action is done on the interactive div A. Div B is at the bottom of the view.
Is there a clean way to make the size of A depend on the size that div B takes up dynamically? Like just the "remainder" of the viewport should be div A. I put an image below of what I'm attempting to achieve. The second image shows what would happen if some action is done in div A - for simplicity, we could say if some method potato() is called, we want div B to now contain two buttons.
I have tried doing a solution with:
position: fixed;
bottom: 0;
and Div B looks 90% right that way, but it doesn't resize Div A and I also don't want Div B "covering" anything in this way. I just want it to be the same level as Div A and sharing the space to get 100% of the viewport.
Any help would be greatly appreciated! I'd prefer to use plain CSS if possible. I'm doing some away team work and can't add much in the way of libraries or new dependencies to the project.

check on this fiddle https://jsfiddle.net/kt931frp/1/ the trick is using flex as suggested by the below answer.
<div class="wrapper">
<div class="part1"></div>
<div class="part2">
<div contenteditable="true"class="contenteditable">continue typing...</div>
</div>
</div>
body {
margin: 0;
}
.wrapper {
height: 100vh;
display: flex;
flex-direction: column;
}
.part1 {
background:#ffff00;
flex: 1 0 auto;
}
.part2 {
padding: 2em;
color: white;
background:#ff0000;
}
.contenteditable{
width:100%;
min-height:50px;
}

Actually, this is pretty easy using Flexbox and the flex property.
You can change the padding value to see how the top block reacts.
body {
margin: 0;
}
main {
height: 100vh;
display: flex;
flex-direction: column;
}
.top-part {
flex: 1 0 auto; /* This tells `top-part` to take the remaining place. */
background: violet;
}
.bottom-part {
padding: 2em;
color: white;
background: lightblue;
}
<main>
<section class="top-part"></section>
<section class="bottom-part">
Some text here
</section>
</main>

Bringing my 2 cents, you can also take advantage of display: table|table-row|table-cell to create this layout (see the MDN documentation on display property to know more).
The trick when using these properties, unless display: flex, is to tell the "actions" cell to measure 0.1px, which will force the cell to be the minimum possible. However, it does not crushes its inner content, allowing to dynamically adjust depending the content inside.
As cells are by default sharing spaces, this does the job for this kind of layout because the "Div A" is using the rest of the available space.
Check this JSFiddle or use the snippet code below to play with it. I annoted the properties you can tweak.
body {
margin: 0px;
}
.app {
width: 100vw;
height: 100vh;
display: table;
}
.main,
.actions {
display: table-row;
}
.main > div,
.actions > div {
display: table-cell;
vertical-align: middle;
text-align: center;
border-width: 10px; /* tweak this */
border-style: solid; /* tweak this */
}
.main > div {
border-color: purple; /* tweak this */
background-color: violet; /* tweak this */
}
.actions > div {
padding: 20px; /* tweak this */
border-color: blue; /* tweak this */
background-color: lightblue; /* tweak this */
height: 0.1px;
}
.button {
width: 200px; /* tweak this */
padding: 10px; /* tweak this */
}
<div class="app">
<main class="main">
<div>
Div A
</div>
</main>
<footer class="actions">
<div>
<div>
Div B - some text and 2 buttons
</div>
<div>
<button class="button">
Button 1
</button>
</div>
<div>
<button class="button">
Button 2
</button>
</div>
</div>
</footer>
</div>
Hope it help you getting inspiration.

CSS: Set divs horizontally in 2 rows

Lets say I have
<div class="cont">
<div class="single">1</div>
<div class="single">2</div>
<div class="single">3</div>
<div class="single">4</div>
<div class="single">5</div>
<div class="single">6</div>
<div class="single">7</div>
</div>
What I want to have is to plase the .single divs in 2 rows like bricks horizontaly from left to right this simple way: 1st div will be in left top corner, 2nd will be placed below 1st, 3rd will be placed next to 1st, 4th will be placed below 3rd and so on like:
1 3 5 7 9
2 4 6 8
All the divs has the same size.
I've tried with masonry.js and its working like a charm, but its way to complex solution for so simple task (simply solution is important).
fiddle playground

There is a CSS property that does exactly that
http://tinker.io/8ff59
.cont {
-webkit-columns: 5em;
-moz-columns: 5em;
columns: 5em; /* desired width of column */
}
http://caniuse.com/#feat=multicolumn

I had the very same problem and solved using the grid.
Here's the CSS you should add to your container:
.cont {
height: 220px;
background: red;
display: grid;
grid-template-rows: repeat(2, 100px);
gap: 10px;
grid-auto-flow: column;
grid-auto-columns: 100px;
}

I don't think you can do that with css with structure as you have.
This structure should help you to get your required layout:
<div class="a">
<div class="b">
<div class="c">1</div>
<div class="c">2</div>
</div>
<div class="b">
<div class="c">3</div>
<div class="c">4</div>
</div>
</div>
<style>
div.a div.b {float: left; width: 100px;}
</style>

For the sake of argument, let's say you can't change your document structure - you need to do this through layout definitions alone.
If you know how many items you will have, the easiest way to manage this would be CSS3 columns with inline-block elements. Your .singles are the inline-blocks, and .cont uses the 'columns' property to set 5 columns each wide enough to hold your singlets, whilst using max-height to force the inline-blocks onto new columns every two items. The singlets have a min-size large enough to stop multiple inline-blocks displaying on the same line.
You can see this effect as a jsfiddle here: http://jsfiddle.net/mwjJG/25/ :
.container {
height: 240px;
columns: 100px 5;
-webkit-columns: 100px 5;
-moz-columns: 100px 5;
}
.single {
display: inline-block;
height: 100px;
width: 100px;
}
Do be aware this won't work on IE<10 unless you can use some kind of JS-based shiv to add support for the columns property (CSS Pie may be able to do this).

I accomplished this with CSS here using this code: It's kind of hackish though.
I set three of the divs (the last three) to the class 'double'
.cont .single {
background: blue;
color: white;
width: 100px;
height: 100px;
margin: 10px;
float:left;
display: inline-block;
}
.cont .double {
background: blue;
color: white;
width: 100px;
height: 100px;
margin: 10px;
display:inline-block;
float:left;
}
div:nth-child(5) {
clear:left;
}
.cont {
height: 220px;
background: red;
}