Переполнение в этом контексте ничего не значит без определения высоты , после которой содержимое должно перетекать над . Проблема ( или преимущество, в большинстве случаев ) с flex заключается в том, что блоки будут расти, чтобы соответствовать «самому большому» контенту, или, скорее, flex (отсюда и название). Вам, вероятно, понадобится Javascript для этого, или вам нужно будет определить максимальную высоту для детей.
Ниже приведен пример вашего кода с max-height
, примененным к детям;
.parent {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: baseline;
}
.child1 {
background-color: red;
align-self: stretch;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 {
background-color: yellow;
min-height: 0;
min-width: 0;
overflow: auto;
margin: 0 15px;
width: calc(50% - 30px);
max-width: calc(50% - 30px);
display: flex;
flex-direction: column;
flex-shrink: 1;
}
.child3 {
background-color: green;
width: 25%;
min-width: 25%;
max-width: 25%;
}
.child2 .tabl {
flex-shrink: 1;
min-height: 0;
overflow: scroll;
}
.child1, .child2, .child3{
max-height: 250px;
overflow: auto;
}
<div class="parent">
<div class="child1">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="child2">
<div class="info">
<h2>Element</h2>
</div>
<div class="tabl">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
<div class="footer">
<button class="btn">Some button</button>
</div>
</div>
<div class="child3">
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
<p>Some element one</p>
<p>Some element two</p>
<p>Some element three</p>
<p>Some element four</p>
</div>
</div>
You might want to take a look at classes that derive from UITypeEditor
(in the System.Drawing.Design
namespace). These types will be passed as parameters to the EditorAttribute
(in the System.ComponentModel
namespace).
You can also look at the metadata for the type to see where the EditorAttribute
is applied. However, do not use reflection here, as that is not what the PropertyGrid
class uses.
Rather use the TypeDescriptor
class to get property descriptors for the properties on the type (call the static GetProperties
method). Then, with the PropertyDescriptor
instance, call the GetEditor
method to get an instance of the editor for that property.
Вы можете бросить любой объект в PropertyGrid. Он будет делать много вещей автоматически. Вам нужно только создавать пользовательские редакторы типов пользовательского интерфейса, если вы хотите иметь особый опыт редактирования, который изначально не предоставляется. И даже в этом случае вы делаете это для каждого свойства, а не для целого объекта.
PropertyGrid использует TypeConverters и есть TypeConverters для каждого примитивного типа (а также наборов примитивных типов).
Пока вы используете один из примитивных типов или коллекцию примитивных типов, сетка свойств должна быть в состоянии обеспечить интерфейс редактирования.
Помимо UITypeEditors, PropertyGrid может отображать любой объект с TypeConverter, который возвращает true для CanConvertFrom (String). Для этого вы можете реализовать свои собственные преобразователи типов для определенных типов объектов.
Имейте в виду, что есть некоторые непубличные классы.
System.Object
System.Drawing.Design.UITypeEditor
System.ComponentModel.Design.CollectionEditor
System.ComponentModel.Design.ArrayEditor
System.Web.UI.Design.CollectionEditorBase
System.Web.UI.Design.WebControls.WizardStepCollectionEditor
System.Web.UI.Design.WebControls.EmbeddedMailObjectCollectionEditor
System.Web.UI.Design.WebControls.HotSpotCollectionEditor
System.Web.UI.Design.WebControls.ListItemsCollectionEditor
System.Web.UI.Design.WebControls.MenuItemStyleCollectionEditor
System.Web.UI.Design.WebControls.RoleGroupCollectionEditor
System.Web.UI.Design.WebControls.StyleCollectionEditor
System.Web.UI.Design.WebControls.SubMenuStyleCollectionEditor
System.Web.UI.Design.WebControls.TableCellsCollectionEditor
System.Web.UI.Design.WebControls.TableRowsCollectionEditor
System.ComponentModel.Design.BinaryEditor
System.ComponentModel.Design.DateTimeEditor
System.ComponentModel.Design.MultilineStringEditor
System.ComponentModel.Design.ObjectSelectorEditor
System.Windows.Forms.Design.AnchorEditor
System.Windows.Forms.Design.BorderSidesEditor
System.Windows.Forms.Design.DockEditor
System.Windows.Forms.Design.FileNameEditor
System.Windows.Forms.Design.FolderNameEditor
System.Windows.Forms.Design.ShortcutKeysEditor
System.Web.UI.Design.ConnectionStringEditor
System.Web.UI.Design.DataBindingCollectionEditor
System.Web.UI.Design.ExpressionsCollectionEditor
System.Web.UI.Design.UrlEditor
System.Web.UI.Design.XmlFileEditor
System.Web.UI.Design.WebControls.DataGridColumnCollectionEditor
System.Web.UI.Design.WebControls.DataControlFieldTypeEditor
System.Web.UI.Design.WebControls.MenuBindingsEditor
System.Web.UI.Design.WebControls.MenuItemCollectionEditor
System.Web.UI.Design.WebControls.ParameterCollectionEditor
System.Web.UI.Design.WebControls.RegexTypeEditor
System.Web.UI.Design.WebControls.TreeNodeCollectionEditor
System.Web.UI.Design.WebControls.TreeViewBindingsEditor
System.Web.UI.Design.WebControls.DataPagerFieldTypeEditor
System.Messaging.Design.QueuePathEditor
System.Drawing.Design.ImageEditor
System.Drawing.Design.ColorEditor
System.Drawing.Design.ContentAlignmentEditor
System.Drawing.Design.CursorEditor
System.Drawing.Design.FontEditor
System.Drawing.Design.FontNameEditor
System.Drawing.Design.IconEditor
System.Workflow.ComponentModel.Design.TypeBrowserEditor
System.Workflow.ComponentModel.Design.BindUITypeEditor