Html Question posted in
Some basic documentation can be found here.

Html – How to get the div with style "colors" constrained to the fieldset width?

I want the div where I have the color squares to be constrained to the fieldset width and to show the horizontal scroll bar, but as it is currently the div grows and makes the fieldset grow in width.

* {
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: break-word;
}

html,
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  width: 100%;
  height: 100%;
  padding: .25rem;
}

.hide {
  display: none !important;
}

.column {
  flex: 1;
  display: flex;
  flex-flow: column;
}

.row {
  flex: 1;
  display: flex;
  flex-flow: row;
}

.gap {
  gap: .25rem;
}

input,
textarea {
  flex: 1;
  border: 1px solid lightgray;
  border-radius: .25rem;
  padding: .5rem;
}

textarea {
  resize: none;
  min-height: 10rem;
}

.form {
  background-color: bisque;
  border: 1px solid lightgray;
  border-radius: .25rem;
  width: 100%;
  max-width: 62.5rem;
}

.form fieldset {
  border: none;
  padding: .5rem;
}

.form label {
  color: gray;
  font-size: small;
}

.form .colors {
  overflow-x: auto;
}

.colorBox {
  width: 150px;
  height: 150px;
}

.colorBox.yellow {
  background-color: yellow;
}

.colorBox.red {
  background-color: red;
}

.colorBox.green {
  background-color: green;
}

.colorBox.blue {
  background-color: blue;
}
<form action="#" class="form">
  <fieldset class="column gap">
    <div class="column">
      <label>Title</label>
      <input type="text" name="title">
    </div>
    <div class="column">
      <label>Details</label>
      <textarea name="details"></textarea>
    </div>
    <div class="column">
      <label>Colors</label>
      <div class="row gap colors">
        <div class="colorBox yellow"></div>
        <div class="colorBox red"></div>
        <div class="colorBox green"></div>
        <div class="colorBox blue"></div>
        <div class="colorBox yellow"></div>
        <div class="colorBox red"></div>
        <div class="colorBox green"></div>
        <div class="colorBox blue"></div>
      </div>
    </div>
  </fieldset>
</form>
Tags:

2

Answers


  1. 0 
    .form {
background-color: bisque;
border: 1px solid lightgray;
border-radius: .25rem;
width: 100%;
max-width: 62.5rem;
overflow: scroll
}

    Adding "overflow: scroll" will fix your problem and make the content of field set to scroll whenever it is going out of the parent (form) width.

    Login or Signup to reply.
  2. 0

    Flex Property

    1. a valid value for flex-grow.
    2. a valid value for flex-shrink.
    3. a valid value for flex-basis.

    Add the following to colorBox class

    .colorBox {
  height: 150px;
  flex: 0 0 150px
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search