Stop div from resizing past its parent <td> - html

Question

.date td div{
width: 100%;
height: 100%;
box-sizing: border-box;
white-space: nowrap;
word-wrap: ellipsis;
overflow:auto;
}
Codepen: http://codepen.io/Intelli/pen/qRYyxa
I have tried every variation of width, height, box-sizing, white-space and word-wrap and nothing seems to work. All I need is if the text is horizontally too long, then add a break, if it's vertically too long, add a scroll bar.

Answer 1

Use table-layout: fixed; to keep the table elements from growing past the defined dimensions, and remove white-space: nowrap; from the nested div so the text will wrap if it's too wide. http://codepen.io/mcoker/pen/WRWLxV
var Calendar = function(){
this.day;
this.month;
this.date;
this.year;
this.events = [];
}
var Event = function(){
this.title;
this.location;
this.id;
this.start_time;
this.end_time;
this.start_month;
this.start_day;
this.start_date;
this.start_year;
this.end_month;
this.end_day;
this.end_date;
this.end_year;
this.email;
this.phone;
this.description;
};
var calendarMonth = [];
var days = ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var startDay;
var startMonth;
var startDate;
var startYear;
/**Create a calendar*/
function getCalendar(cal) {
$(".month h2").text(months[cal.month]);
$(".month h3").text(cal.year);
$(".calendar tr").eq(2).find("td").eq(2).find("div").html("This is a very long test string to see if the div resizes past the td width </br> I also dont want to use overflow:hidden because I want a (VERTICAL ONLY)scroll bar if the height of the text is too long </br> Testing scroll </br> Testing scroll </br> Testing scroll </br> Testing scroll </br> Testing scroll </br> Testing scroll </br> Testing scroll");
var daysInMonth = getDaysInMonth(months[cal.month], cal.year);
startDay = cal.day;
startDate = cal.date;
startMonth = cal.month;
startYear = cal.year;
/**row 2 because that is the one with the dates*/
var row = 2;
if (cal.day != 0){
for (var j = cal.day - 1; j >= 0; j--) {
$(".calendar tr").eq(row).find("td").eq(j).find("div").css("background-color", "#b1c9ce");
}
}
/**fill the calendar appropriately*/
while (cal.date <= daysInMonth) {
if (cal.day == days.length) {
row++;
cal.day = 0;
$(".calendar").append('<tr class="date"><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>');
}
$(".calendar tr").eq(row).find("td").eq(cal.day).find("div").text(cal.date);
var temp = new Calendar();
temp.day = cal.day;
temp.month = cal.month;
temp.date = cal.date;
temp.year = cal.year;
temp.events.push(new Event());
calendarMonth.push(temp);
cal.day++;
cal.date++;
}
lastDay = cal.day;
cal.date = 1;
var j = cal.day;
if (cal.day <= 6) {
for (j = cal.day; j < days.length; j++) {
$(".calendar tr").eq(row).find("td").eq(j).find("div").css("background-color", "#b1c9ce");
}
}
while (cal.day < days.length) {
$(".calendar tr").eq(row).find("td").eq(cal.day).find("div").text(cal.date);
cal.day++;
cal.date++;
}
}
function getDaysInMonth(startMonth, startYear) {
var daysInMonth;
/**Get the number of days in the month given*/
if ((startMonth == "January") || (startMonth == "March") || (startMonth == "May") || (startMonth == "July") || (startMonth == "August") || (startMonth == "October") || (startMonth == "December")) {
daysInMonth = 31;
} else if ((startMonth == "April") || (startMonth == "June") || (startMonth == "September") || (startMonth == "November")) {
daysInMonth = 30;
} else if (startMonth == "February") {
if (startYear % 4 == 0) {
daysInMonth = 29;
} else {
daysInMonth = 28;
}
}
return daysInMonth;
}
$(function() {
var calendar = new Calendar();
var d = new Date();
var firstDay = new Date(d.getFullYear(), d.getMonth(), 1);
calendar.day = firstDay.getDay();
calendar.month = firstDay.getMonth();
calendar.year = firstDay.getFullYear();
calendar.date = firstDay.getDate();
getCalendar(calendar);
$(".Prev").click(function() {
calendarMonth = [];
var temp = new Calendar();
if(startMonth == 0){
startMonth = 11;
startYear--;
}
else startMonth--;
var daysInMonth = getDaysInMonth(months[startMonth], startYear);
var index = startDay - (daysInMonth % 7);
if(index < 0) index += 7;
startDay = index;
temp.day = startDay;
temp.date = startDate;
temp.month = startMonth;
temp.year = startYear;
$(".date").remove();
$(".calendar").append('<tr class="date"><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>');
getCalendar(temp);
});
$(".Next").click(function() {
calendarMonth = [];
var temp = new Calendar();
var daysInMonth = getDaysInMonth(months[startMonth], startYear);
if (startMonth == 11) {
startYear++;
startMonth = 0;
} else {
startMonth++;
}
var index = startDay + (daysInMonth % 7);
if(index > 6) index = 7 - index;
if(index < 0) index *= -1;
startDay = index;
temp.day = startDay;
temp.date = startDate;
temp.month = startMonth;
temp.year = startYear;
$(".date").remove();
$(".calendar").append('<tr class="date"><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr>');
getCalendar(temp);
});
});
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: 2px solid darkgray;
color: #d9d9d9;
/**Month/Year text color*/
table-layout: fixed;
}
td,
th {
text-align: left;
max-width: 14.28%;
border: 2.5px solid darkgray;
background-color: #DFE9EB;
/**cell background-color*/
}
td {
color: black;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.calendar {
margin-right: auto;
margin-left: auto;
/*width: 75%;*/
height: 100%;
}
.month {
height: 5%;
background-color: #2c7b87;
/**Month/Year background color*/
border: none;
border-bottom: #c20a38 solid 1.5vh;
}
.month h2 {
height: 30%;
color: #d9d9d9;
text-align: center;
}
.month h3 {
height: 30%;
color: #d9d9d9;
text-align: center;
}
.date td {
text-align: left;
vertical-align: top;
font-size: 1.5vh;
height: 10vh;
}
.date td div {
width: 100%;
height: 100%;
box-sizing: border-box;
word-wrap: ellipsis;
overflow: auto;
}
.day th {
color: #595959;
colspan="1";
width: 30vh;
text-align: center;
}
.Prev,
.Next {
width: 30%;
height: 30%;
font-size: 20px;
display: block;
margin: auto;
}
<table class="calendar">
<tr>
<td class="month"><button class="Prev"><</button></td>
<td class="month"></td>
<td class="month"></td>
<td class="month"><h2>Month<h3>Year</h3></h2></td>
<td class="month"></td>
<td class="month"></td>
<td class="month"><button class="Next">></button></td>
</tr>
<tr class="day">
<th>
<h3>Sunday</h3></th>
<th>
<h3>Monday</h3></th>
<th>
<h3>Tuesday</h3></th>
<th>
<h3>Wednesday</h3></th>
<th>
<h3>Thursday</h3></th>
<th>
<h3>Friday</h3></th>
<th>
<h3>Saturday</h3></th>
</tr>
<tr class="date">
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>