bob_merlin Posts - Answer Overflow

bob_merlin

•Created by bob_merlin on 1/10/2024 in #front-end

How to handle overflow in Grid (grand-)children?

Hi, im currently working on a grid layout where the grid-items are either flex or grid themself. The issue i have though, is that there is overflowing text which doesn't get recognized by the browser as overflow. So overflow: hidden; doesn't have any effect. I implemented a small prototype with which i can show the issue here: https://play.tailwindcss.com/S1d0f4JYmk When you toggle to mobile size, the text of the two smaller grid-items overflows behind the img in its container. How can i prevent that from happening?

20 replies

KPCKevin Powell - Community

•Created by bob_merlin on 10/5/2023 in #front-end

Need explanation: Why .reduce() returns wrongly ordered object

Hi im currently working on a project where i want to store and order ids in groups, which can also be sorted. So my datastructure looks like this:

// Key is group id and value is an array of item ids that belong to that group
const itemGroups = {
  "1": [10, 11, 12],
  "2": [13, 14, 15]
}

// Key is group id and value is an array of item ids that belong to that group
const itemGroups = {
  "1": [10, 11, 12],
  "2": [13, 14, 15]
}

I use the library sortablejs to sort these items & groups. But somehow im not able to sort the groups in the object with the following:

function sortGroups(oldIndex, newIndex) {
  const groupIds = Object.keys(itemGroups)
  const [id] = groupIds.splice(oldIndex, 1)

  groupIds.splice(newIndex, 0, id)
  // The groupIds are correctly sorted here

  return groupIds.reduce((acc, groupId) => {
    acc[groupId] = itemGroups[groupId]

    return acc
  }, {})
  // But after the reduce, The new order hasn't changed
}

function sortGroups(oldIndex, newIndex) {
  const groupIds = Object.keys(itemGroups)
  const [id] = groupIds.splice(oldIndex, 1)

  groupIds.splice(newIndex, 0, id)
  // The groupIds are correctly sorted here

  return groupIds.reduce((acc, groupId) => {
    acc[groupId] = itemGroups[groupId]

    return acc
  }, {})
  // But after the reduce, The new order hasn't changed
}

I checked to see if .reduce() actually iterates in order of the array. And it does. But somehow the second pair gets inserted in the beginning of the object. Can someone explain to me whats happening here? Its really confusing.

20 replies

KPCKevin Powell - Community

•Created by bob_merlin on 12/7/2022 in #front-end

flex-grow - Maintain aspect ratio

Suppose i have the following:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100px;
  height: 100px;
  flex-grow: 1;
}

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100px;
  height: 100px;
  flex-grow: 1;
}

How can i ensure that not only the width of the children grows, but also the height grows so that the aspect ratio is maintained?

13 replies

Gaming

Programming