CODEWITHSUNDEEP
htmlcssreactjsantd
srinivast6
srinivast6

Reputation: 339

child div overflowing the parent div

I have 3 group of checkboxes, first two are given fixed width and the last one should take the remaining space. In the last group if the names are long, horizontal scroll appear for this group.

However, the last group is overflowing the parent div here. how can I fix this?

Upvotes: 0

Views: 5785

Answers (2)

Tanner Dolby
Tanner Dolby

Reputation: 4441

You just need to add overflow: auto to the parent container .select__content, this way when content is too big to fit in its block formatting context and overflows, the scrollbar appears and the container .select__content container becomes scrollable. Try this out.

.select__content {
  margin-top: 2px;
  display: flex;
  overflow: auto;
}

Here is the updated CodeSandbox demo.

Upvotes: 2

abhinum95
abhinum95

Reputation: 69

.select_checkbox takes width auto which grows because the span element is very long. It can be resolved by giving .select_checkbox a max-width so it does not go beyond the specified width and the scrollbar may appear. Try adding max-width like this.

.select__checkbox {
  border: 2px solid lightgray;
  display: flex;
  flex-direction: column;
  max-width: 260px;
}

Upvotes: 1

Related Questions